制作这个简单的轮播图之前，你必须掌握html、css、以及JavaScript中的节点操作，定时器的使用，条件语句的使用以及JS修改样式和动画原理。
轮播图对于网页来说是个常见也可以说是必备的部分，而轮播图的形式也是各式各样，有简约的也有炫酷的。当然，这里我就只说简约的全屏轮播图水平无缝滚动。
首先是给出一个div标签，并且给这个标签设置宽高（宽高要和图片一致，否则给图片设置居中）以及溢出隐藏（overflow:hidden）并设置定位为相对定位（position:relative），然后用一个有序列表（ul）标签将图片放在li标签里面，ul标签的高度要与图片高度一致，宽度是图片的数量乘以图片的宽度，定位设置为绝对定位（position:absolute），而li标签设置左浮动。静态工作基本完成。
而轮播图的播放则需要用到动画和定时器，这里我用的是已经封装好的动画函数。在js中通过获取ul的子节点来获取到li的一个数组，再通过这个数组的长度以及图片的宽度来计算出ul的宽度。为了实现无缝滚动，我们必须克隆第一张图片并将其放在ul后面（通过cloneNode以及appendChild来实现），一开始声明变量index，并赋值为0，然后进行判断，如果index值大于li数组的长度的话，将ul的left值重置为0，并将index值设置为1（因为轮播图的最后一张和第一张是一样的，所以当轮播图的最后一张出现在页面的时候，我们将其left值设置为0使其直接跳到第一张，而肉眼是捕捉不到这个瞬间的，而当播放到最后一张时，下一张出现在页面的是轮播图的第二张，所以index值为1）。当然轮播图的滚动要有个过渡效果，所以ul的left的目标值为当前index值乘以图片宽度。在定时器中设定一个刷新时间，并且每刷新一次，让index值加一（也就是index++）。到这里，轮播图的向左无缝滚动就完成了。而向右无缝滚动我是设置在点击上，同时，鼠标在移入和移出轮播图的时候，我分别设置了清除定时器和执行定时器。这是为了避免自动播放和点击的冲突。在点击前一张，也就是向右滚动的时候，index值减一（也就是index- -），并且做一个判断，就是当index值小于0的时候，重新给index赋值为li数组长度减去二（我这里li的长度赋给了len，所以index=len-2），而ul的left值为-(len-1)乘以图片宽度，记得加上单位px。这个上面讲的最后一张跳到第一张同个道理，当图片播放到第一张的时候，再按一下，应跳转到实际图片数量的最后一张，所以，当图片到第一张时，会瞬间跳到我们克隆的那张图片上。
下面附上js代码截图,因为多个地方用到判断，所以用函数show将其封装
封装的动画函数代码
网友评论