优德娱乐场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 地图