JS使用tween.js动画库实现轮播图并且有切换功能

2019-11-19 13:28:40

字体：大中小

来源：转载

供稿：网友

效果图如下所示：

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{  width: 500px;  height: 300px;  position: relative;  overflow: hidden; } .box{  width: 500%;  height: 100%;  position: absolute;  left: 0; } .box>div{  width: 500px;  height: 300px;  float: left;  font-size: 100px;  text-align: center;  line-height: 300px; } div:nth-child(1){  background-color: red; } div:nth-child(2){  background-color: green; } div:nth-child(3){  background-color: pink; } div:nth-child(4){  background-color: blue; } </style></head><body> <input type="button" value="last"> <input type="button" value="next"> <input type="button" value="按钮1" class="ha"> <input type="button" value="按钮2" class="ha"> <input type="button" value="按钮3" class="ha"> <input type="button" value="按钮4" class="ha"> <div class="wrap"> <div class="box">  <div id="one">div1</div>  <div>div2</div>  <div>div3</div>  <div>div4</div>  <div id="one">div1</div> </div> </div></body><script src="./tween.js"></script><script> //获取元素 var inps = document.querySelectorAll("input"); var box = document.querySelector(".box"); var ha = document.querySelectorAll(".ha"); //记录图片下标 var index = 0; var w = -500; var timer = null; //自动播放 //放在计时器就是自动播放,骑士就是下一张的操作 function autoImg(){ index++; if(index>3){  // console.log(index);  index=0;  // console.log(index); } //动画开始时间 var t = 0; //动画结束时间 var d = 30; //动画的起始位置 var b = box.offsetLeft; //动画的终止位置减去动画的起始位置,该变量为-500 // var c =index*w-b; console.log(c); var c = -500; if(b<=-1500){  b=0; } clearInterval(timer); timer = setInterval(function(){  t++;  box.style.left=Tween.Linear(t,b,c,d)+"px";  if(t>=d){  clearInterval(timer);  } },30); }//关闭轮播 function clearAuto(){ clearInterval(autotimer);  autotimer = setInterval(autoImg,3000); } var autotimer = setInterval(autoImg,3000); //下一张 inps[1].onclick = function(){  clearAuto();  autoImg(); } //上一张 function prevImg(){ index--; if(index<0){  index=3; } //动画开始时间 var t = 0; //动画结束时间 var d = 30; //动画的起始位置 var b = box.offsetLeft; //动画的终止位置减去动画的起始位置 var c =index*w-b; clearInterval(timer); timer = setInterval(function(){  t++;  box.style.left=Tween.Linear(t,b,c,d)+"px";  if(t>=d){  clearInterval(timer);  } },30); } inps[0].onclick = function(){ clearAuto(); prevImg(); }function indexImg(n){  index = n; var t = 0; //动画结束时间 var d = 30; //动画的起始位置 var b = box.offsetLeft; //动画的终止位置减去动画的起始位置 var c =index*w-b; clearInterval(timer); timer = setInterval(function(){  t++;  box.style.left=Tween.Linear(t,b,c,d)+"px";  if(t>=d){  clearInterval(timer);  } },30); }  for(var i=0;i<ha.length;i++){  (function(i){  ha[i].onclick = function(){   // box.style.left = (-500*(i-2))+"px";   clearAuto();   indexImg(i);   console.log(i);  }  })(i); }</script></html>

总结

以上所述是小编给大家介绍的JS使用tween.js动画库实现轮播图并且有切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：vue-router中的hash和history两种模式的区别

下一篇：SVG实现时钟效果