js如何制作图片轮播

JavaScript020

js如何制作图片轮播,第1张

工具/材料

Sublime Text

01

首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示

02

然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头

03

接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明

04

最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能

05

最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图

不知道你的css是什么样的，所以你的div和span我这里都看不到，我只帮你改了图的轮播，

var total = $("#solid ul").children().length

var now = 0

var timer = null

$("#solid ul li").css("display","none")

foo()

timer = setInterval(foo,1000)

function foo() {

$("#solid ul li").eq(now).siblings().css("display","none")

$("#solid ul li").eq(now).fadeIn(400)

now++

if (now == total) {

now = 0

}

}