无缝滚动详解
Posted 汪洋是大大的海
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝滚动详解相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> div, image, button, ul, li { margin: 0; padding: 0; } /*显示图片的内容区,大小刚好等于图片的大小*/ .img-scroll { position: relative; width: 430px; height: 320px; margin: 0 auto; /*overflow: hidden;*/ } /*上下一张按钮,样式随意控制*/ .img-scroll>button { display: none; position: absolute; top: 50%; margin-top: -22px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #eee; outline: none; color: #eee; font-size: 30px; font-weight: bold; background-color: rgba(0, 0, 0, .3); cursor: pointer; } .next { right: 0; } /*有多少张图片,就把宽度设为内容区宽度*图片数量,让所有图片排成一横排,比如我这就是430*5=2150*/ .img-content { width: 2150px; height: 320px; overflow: hidden; } /*装每张图片的div*/ .img-content>div { float: left; width: 430px; height: 320px; } .arc-list { position: absolute; bottom: 0; } .arc-list>li { display: inline-block; width: 15px; height: 15px; border-radius: 50%; list-style-type: none; background-color: rgba(0, 0, 0, .5); } </style> </head> <body> <div class="img-scroll" id="imgScroll"> <div class="img-content" id="imgCon"> <div> <a href="#"><img src="1.png" alt="gg" /></a> </div> <div> <a href="#"><img src="2.png" alt="gg" /></a> </div> <div> <a href="#"><img src="3.png" alt="gg" /></a> </div> <div> <a href="#"><img src="4.png" alt="gg" /></a> </div> <div> <a href="#"><img src="5.png" alt="gg" /></a> </div> </div> <button type="button" id="prev"> <</button> <button type="button" class="next" id="next">></button> <ul class="arc-list" id="arcList"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script type="text/javascript"> $(function() { //缓存存放图片的区域 var $imgCon = $("#imgCon"), //得到内容去的宽度 w = $("#imgScroll").css("width"); //缓存小圆点和它的数组长度 $li = $("#arcList li"), len = $li.length, //用来存放需要关闭的setInterval的值 timer = null, //用于确定该显示第几个小圆点的参数 index = 0; //默认将第一个小圆点点亮 $li.get(index).style.backgroundColor = "red"; /*自动滚动图片的方法,很简单,移走第一张,下一张自然的就显示出来了, 然后把第一张放到末尾去,并把它的marginLeft归零,当播放到最后一张就可以无缝衔接第一张了 */ function imgScroll() { //每次将第一个div向左移出内容区，下一个div自动显示在内容区，并将第一个div附加到父元素的最后 $imgCon.children("div:first").animate({ marginLeft: "-" + w }, 1000, "swing", function() { $(this).css({ marginLeft: "0" }).appendTo($imgCon); //将当前小圆点熄灭 $li.get(index).style.backgroundColor = "rgba(0,0,0,.5)"; if (index == len - 1) { index = 0; } else { index++; } //将下一个小圆点点亮 $li.get(index).style.backgroundColor = "red"; //判断小圆点是否为最后一个,如果是,则将标记小圆点的参数归零,重新从第一个开始 }); } timer = setInterval(imgScroll, 3000); //鼠标放在图片上停止滚动,鼠标离开图片继续滚动 $("#imgScroll").hover( function() { clearInterval(timer); //控制按钮的显示 $("#imgScroll button").show(300, "swing"); }, function() { timer = setInterval(imgScroll, 3000); $("#imgScroll button").hide(300, "swing"); } ); //手动点击下一张时只需手动调用imgScroll就行 $("#next").on("click", function() { /*如果连续点击下一张的话,会引发不和谐的东西,所以我们判断第一张图片的marginLeft值,如果正在执行动画,它的marginLeft是不会为0的,所以这样判断就确保了执行完了一个动画才会调用下一张的方法*/ var marginLeft = parseInt($imgCon.children("div:first").css("marginLeft")); if (marginLeft == 0) { imgScroll(); } }); //手动点击上一张图片的方法 $("#prev").on("click", function() { //判断同上 var marginLeft = parseInt($imgCon.children("div:first").css("marginLeft")); if (marginLeft == 0) { //上一张图片就是刚才移动到末尾的那张,所以我把末尾的那张添加到第一张的前面 $imgCon.children("div:first").before($imgCon.children("div:last")); /*注意这里的第一张是刚才末尾的那张图片了,设置marginLeft为-w是将它放在内容区的左边,营造从左滑向右的效果,这里的图片滚动全部操作第一张图片,这张图片向左离开内容区时,就将位置留给下一张显示,当它从左到右回来是,就把下一张挤出内容区*/ $imgCon.children("div:first").css({ marginLeft: "-" + w }).animate({ marginLeft: "0" }, 1000, "swing", function() { //将当前小圆点熄灭 $li.get(index).style.backgroundColor = "rgba(0,0,0,.5)"; if (index == 0) { index = len - 1; } else { index--; } //将上一个小圆点点亮 $li.get(index).style.backgroundColor = "red"; //判断小圆点是否为第一个,如果是,则将标记圆点的参数设为最大,即最后一个小圆点 }); } }); }); </script> </body> </html>
备注：需加载jquery
以上是关于无缝滚动详解的主要内容，如果未能解决你的问题，请参考以下文章