首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 < ...
首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首尾轮播</title> 6 <link rel="stylesheet" href="首尾轮播.css"> 7 <script src='/images/loading.gif' data-original="首尾轮播.js"></script> 8 </head> 9 <body>10 <div id="container">11 <div id="list" style="left: -500px">12 <div><a href="#"><img src='/images/loading.gif' data-original="../imgs/5.jpg" ></a></div>13 <div><a href="#"><img src='/images/loading.gif' data-original="../imgs/1.jpg" ></a></div>14 <div><a href="#"><img src='/images/loading.gif' data-original="../imgs/2.jpg" ></a></div>15 <div><a href="#"><img src='/images/loading.gif' data-original="../imgs/3.jpg" ></a></div>16 <div><a href="#"><img src='/images/loading.gif' data-original="../imgs/4.jpg" ></a></div>17 <div><a href="#"><img src='/images/loading.gif' data-original="../imgs/5.jpg" ></a></div>18 <div><a href="#"><img src='/images/loading.gif' data-original="../imgs/1.jpg" ></a></div>19 </div>20 21 <div class="arrow" id="prev"><</div>22 <div class="arrow" id="next">></div>23 24 25 </div> 26 27 </body> 28 29 </html>
接下来给出css和js代码,大家可以酌情根据图片的大小、数量、宽度,调整container、list的参数,这也是封装JS所要考虑的参数。
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 6 #container{ 7 height: 400px; 8 width: 500px; 9 margin: 0 auto;10 position: relative;11 overflow: hidden;12 border: 1px solid black;13 }14 15 #list>div {16 float: left;17 }18 #list{19 position: absolute; 20 height: 400px;21 width: 3600px;22 23 }24 25 #list img{26 height: 400px;27 width: 500px;28 }29 .arrow {30 user-select:none;31 position: absolute;32 top:150px;33 z-index: 2;34 background-color: #aaa;35 height: 100px;36 width: 80px;37 cursor: pointer;38 opacity: 0.5;39 display: none;40 line-height: 100px;41 text-align: center;42 color: #222;43 font-size: 3em;44 45 }46 #container:hover .arrow{47 display: block;48 }49 #prev{50 left:20px;51 }52 53 #next{54 right: 20px;55 }
在JS中,我们可以通过改变speed变量来控制图片切换的速度....这里用的是 element.style.transition来控制的过渡效果.
1 window.onload=function(){ 2 var container = document.getElementById('container'); 3 var list = document.getElementById('list');//获取图片容器 4 var prev = document.getElementById('prev');//向前按钮 5 var next = document.getElementById('next');//向后按钮 6 var nowP = 1; //显示位置 7 var judge = null; //执行权 8 var speed = 0.1; // 切换速度 秒 9 prev.onclick=function(){10 if(!judge){11 judge = setTimeout(function(){12 if(nowP==1){setTimeout(function(){13 list.style.transition="left 0s";14 list.style.left = "-2500px"; 15 nowP = 5;},speed*1000);} //当到达图片表左边缘时与动画同步切换 16 list.style.transition = "left "+speed+"s";17 move(500);18 nowP--;19 judge = null;20 },speed*1000);21 }22 };23 next.onclick=function(){24 if(!judge){ 25 judge = setTimeout(function(){26 if(nowP==5){setTimeout(function(){27 list.style.transition="left 0s";28 list.style.left = "-500px"; 29 nowP = 1;},speed*1000);} //当到达图片表右边缘时与动画同步切换 30 list.style.transition = "left "+speed+"s";31 move(-500);32 nowP++;33 judge = null;34 },speed*1000);35 }36 37 };38 39 function move(num){40 var term = parseInt(list.style.left) + num ; 41 list.style.left = term+"px";42 }43 44 var roll= setInterval(function(){45 next.onclick();46 },2000);47 48 container.onmouseenter=function(){49 clearInterval(roll);50 };51 52 container.onmouseleave=function()53 {54 roll=setInterval(function(){55 next.onclick();56 },2000);57 };58 59 60 };
下面是一个演示demo,简单来说原理就是在切换到图片表首和表尾的动画开始时,设置一个延迟执行时间与动画过渡时间相同的setTimeout函数来执行瞬间切换,再通过节流来保证最大的切换速度(speed)。
节流的原理我是参考的以下两位元老的文章:
阮一峰Javascript标准参考教程(事件类型scroll事件小结)
mqyqing.fengJavaScript专题之跟着 underscore 学节流.Github
本人也是初学前端,如果有帮助的话,点一下推荐吧
原标题:图片首尾平滑轮播(JS原生方法—节流)原创
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。