当前位置：Gxlcms > JavaScript > JS使用tween.js动画库实现轮播图并且有切换功能

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

时间：2021-07-01 10:21:17 帮助过：48人阅读

效果图如下所示：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Document</title>
  6.  <style>
  7.  .wrap{
  8.   width: 500px;
  9.   height: 300px;
  10.   position: relative;
  11.   overflow: hidden;
  12.  }
  13.  .box{
  14.   width: 500%;
  15.   height: 100%;
  16.   position: absolute;
  17.   left: 0;
  18.  }
  19.  .box>div{
  20.   width: 500px;
  21.   height: 300px;
  22.   float: left;
  23.   font-size: 100px;
  24.   text-align: center;
  25.   line-height: 300px;
  26.  }
  27.  div:nth-child(1){
  28.   background-color: red;
  29.  }
  30.  div:nth-child(2){
  31.   background-color: green;
  32.  }
  33.  div:nth-child(3){
  34.   background-color: pink;
  35.  }
  36.  div:nth-child(4){
  37.   background-color: blue;
  38.  }
  39.  </style>
  40. </head>
  41. <body>
  42.  <input type="button" value="last">
  43.  <input type="button" value="next">
  44.  <input type="button" value="按钮1" class="ha">
  45.  <input type="button" value="按钮2" class="ha">
  46.  <input type="button" value="按钮3" class="ha">
  47.  <input type="button" value="按钮4" class="ha">
  48.  <div class="wrap">
  49.  <div class="box">
  50.   <div id="one">div1</div>
  51.   <div>div2</div>
  52.   <div>div3</div>
  53.   <div>div4</div>
  54.   <div id="one">div1</div>
  55.  </div>
  56.  </div>
  57. </body>
  58. <script src="./tween.js"></script>
  59. <script>
  60.  //获取元素
  61.  var inps = document.querySelectorAll("input");
  62.  var box = document.querySelector(".box");
  63.  var ha = document.querySelectorAll(".ha");
  64.  //记录图片下标
  65.  var index = 0;
  66.  var w = -500;
  67.  var timer = null;
  68.  //自动播放
  69.  //放在计时器就是自动播放,骑士就是下一张的操作
  70.  function autoImg(){
  71.  index++;
  72.  if(index>3){
  73.   // console.log(index);
  74.   index=0;
  75.   // console.log(index);
  76.  }
  77.  //动画开始时间
  78.  var t = 0;
  79.  //动画结束时间
  80.  var d = 30;
  81.  //动画的起始位置
  82.  var b = box.offsetLeft;
  83.  //动画的终止位置减去动画的起始位置,该变量为-500
  84.  // var c =index*w-b;
  85.  console.log(c);
  86.  var c = -500;
  87.  if(b<=-1500){
  88.   b=0;
  89.  }
  90.  clearInterval(timer);
  91.  timer = setInterval(function(){
  92.   t++;
  93.   box.style.left=Tween.Linear(t,b,c,d)+"px";
  94.   if(t>=d){
  95.   clearInterval(timer);
  96.   }
  97.  },30);
  98.  }
  99. //关闭轮播
  100.  function clearAuto(){
  101.  clearInterval(autotimer);
  102.   autotimer = setInterval(autoImg,3000);
  103.  }
  104.  var autotimer = setInterval(autoImg,3000);
  105.  //下一张
  106.  inps[1].onclick = function(){
  107.   clearAuto();
  108.   autoImg();
  109.  }
  110.  //上一张
  111.  function prevImg(){
  112.  index--;
  113.  if(index<0){
  114.   index=3;
  115.  }
  116.  //动画开始时间
  117.  var t = 0;
  118.  //动画结束时间
  119.  var d = 30;
  120.  //动画的起始位置
  121.  var b = box.offsetLeft;
  122.  //动画的终止位置减去动画的起始位置
  123.  var c =index*w-b;
  124.  clearInterval(timer);
  125.  timer = setInterval(function(){
  126.   t++;
  127.   box.style.left=Tween.Linear(t,b,c,d)+"px";
  128.   if(t>=d){
  129.   clearInterval(timer);
  130.   }
  131.  },30);
  132.  }
  133.  inps[0].onclick = function(){
  134.  clearAuto();
  135.  prevImg();
  136.  }
  137. function indexImg(n){
  138.   index = n;
  139.  var t = 0;
  140.  //动画结束时间
  141.  var d = 30;
  142.  //动画的起始位置
  143.  var b = box.offsetLeft;
  144.  //动画的终止位置减去动画的起始位置
  145.  var c =index*w-b;
  146.  clearInterval(timer);
  147.  timer = setInterval(function(){
  148.   t++;
  149.   box.style.left=Tween.Linear(t,b,c,d)+"px";
  150.   if(t>=d){
  151.   clearInterval(timer);
  152.   }
  153.  },30);
  154.  }
  155.  
  156.  for(var i=0;i<ha.length;i++){
  157.   (function(i){
  158.   ha[i].onclick = function(){
  159.    // box.style.left = (-500*(i-2))+"px";
  160.    clearAuto();
  161.    indexImg(i);
  162.    console.log(i);
  163.   }
  164.   })(i);
  165.  }
  166. </script>
  167. </html>

总结

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！