摘要:无缝轮播的原理在滚动层前后分别插入最后一个元素和最前面一个元素,然后在动画滚到最后或者最前的时候,初始化滚动层的位置样式,速度很快,无法察觉,就如同无缝一般。
之前面试被问到这个问题,之前都是随便找大神插件,知道怎么去做,但是一直没实现过。
无缝轮播的原理在滚动层前后分别插入最后一个元素和最前面一个元素,然后在动画滚到最后或者最前的时候,初始化滚动层的位置样式,速度很快,无法察觉,就如同无缝一般。
html片段css样式
.wrap{ width: 620px; height: 413px; overflow: hidden; position: fixed; top: 0; left: 0; bottom: 0; right: 0; margin: auto; border: 5px solid #FFF; background: #FFF; } ul{ width: auto; position: absolute; top: 0; left: 0; } li{ width: 620px; height: 413px; float: left; list-style: none; box-sizing: border-box; border: 5px solid #E0E0E0; } img{ width: 100%; } a{ display: block; width: 50px; height: 20px; background: #CCC; color: #FFF; font-size: 14px; text-align: center; position: absolute; z-index: 9; text-decoration: none; } a:first-of-type{ top: 50%; left: 10px; transform: translateY(-50%); } a:last-of-type{ top: 50%; right: 10px; transform: translateY(-50%); }JS
$(document).ready(function(){ let index = 1, instance = $("li")[0].offsetWidth, oldlen = $("li").length; // 分别前后插入最后和最前的元素 $("ul").append($("li").eq(0).clone()).prepend($("li").eq(oldlen - 1).clone());; let len = $("li").length; $("ul").css({"width": instance * len + "px", "left": -instance + "px"}); $(".nextBtn").on("click", function(){ index++; $("ul").stop().animate({"left": -instance * index}, 300, function(){ // 当滑动到最后(复制到最后的第一张图位置),等动画完成之后,初始化整个图片滚动层容器的位置 if( index == len - 1 ){ index = 1; $("ul").css({"left": -instance * index + "px"}); } }); }); $(".prevBtn").on("click", function(){ index--; $("ul").stop().animate({"left": -instance * index}, 300, function(){ // 当滑动到前面(复制到最前面的最后一张图位置),等动画完成之后,初始化整个图片滚动层容器的位置 if( index == 0 ){ index = len - 2; $("ul").css({"left": -instance * index + "px"}); } }); }); // 自动播放 function autoPlay(){ autoplay = setInterval(function(){ index++; $("ul").stop().animate({"left": -instance * index}, 300, function(){ if( index == len - 1 ){ index = 1; $("ul").css({"left": -instance * index + "px"}); } }); }, 3000); }; autoPlay(); $(".wrap").hover(function(){ autoplay && clearInterval(autoplay); }, function(){ autoPlay(); }); });备注
关于轮播索引没加上,这个比较容易,关注index的值就可以了。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115980.html
摘要:无缝轮播的原理在滚动层前后分别插入最后一个元素和最前面一个元素,然后在动画滚到最后或者最前的时候,初始化滚动层的位置样式,速度很快,无法察觉,就如同无缝一般。 之前面试被问到这个问题,之前都是随便找大神插件,知道怎么去做,但是一直没实现过。 无缝轮播的原理 在滚动层前后分别插入最后一个元素和最前面一个元素,然后在动画滚到最后或者最前的时候,初始化滚动层的位置样式,速度很快,无法察觉,就...
摘要:无缝轮播的原理在滚动层前后分别插入最后一个元素和最前面一个元素,然后在动画滚到最后或者最前的时候,初始化滚动层的位置样式,速度很快,无法察觉,就如同无缝一般。 之前面试被问到这个问题,之前都是随便找大神插件,知道怎么去做,但是一直没实现过。 无缝轮播的原理 在滚动层前后分别插入最后一个元素和最前面一个元素,然后在动画滚到最后或者最前的时候,初始化滚动层的位置样式,速度很快,无法察觉,就...
摘要:轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口,模拟网易云音乐移动端。目前主要实现了无缝轮播,自动播放,端左右按钮点击切换,移动端手势滑动切换。 轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使用UI组件。在轮播图部分,...
摘要:轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口,模拟网易云音乐移动端。目前主要实现了无缝轮播,自动播放,端左右按钮点击切换,移动端手势滑动切换。 轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使用UI组件。在轮播图部分,...
摘要:轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口,模拟网易云音乐移动端。目前主要实现了无缝轮播,自动播放,端左右按钮点击切换,移动端手势滑动切换。 轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使用UI组件。在轮播图部分,...
阅读 2520·2023-04-25 14:54
阅读 594·2021-11-24 09:39
阅读 1801·2021-10-26 09:51
阅读 3843·2021-08-21 14:10
阅读 3477·2021-08-19 11:13
阅读 2690·2019-08-30 14:23
阅读 1804·2019-08-29 16:28
阅读 3347·2019-08-23 13:45