关于轮播图水平无缝滚动

作者 : 开心源码 本文共1133个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共84人阅读

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

关于轮播图水平无缝滚动

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 关于轮播图水平无缝滚动

发表回复