优德娱乐场w88手机版:一个值得你收藏的教程网站

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

时间:2018-07-24 16:04:34 编辑:猪哥 来源:转载

效果图如下所示:

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




 
 Document
 


 
 
 
 
 
 
 
div1
div2
div3
div4
div1
<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

文章评论

热门栏目

XML 地图 | Sitemap 地图