美文网首页
web前端技术课程讲解之关于轮播图水平无缝滚动

web前端技术课程讲解之关于轮播图水平无缝滚动

作者: 纤纤郡主 | 来源:发表于2018-11-23 18:01 被阅读0次

    制作这个简单的轮播图之前,你必须掌握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将其封装

    封装的动画函数代码

    相关文章

      网友评论

          本文标题:web前端技术课程讲解之关于轮播图水平无缝滚动

          本文链接:https://www.haomeiwen.com/subject/prqsqqtx.html