你的位置:首页 > 软件开发 > Java > 图片首尾平滑轮播(JS原生方法—节流)原创

图片首尾平滑轮播(JS原生方法—节流)原创

发布时间:2017-10-16 18:00:11
首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 < ...

图片首尾平滑轮播(JS原生方法—节流)原创

首先给出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">&lt;</div>22   <div class="arrow" id="next">&gt;</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原生方法—节流)原创

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。