快捷導(dǎo)航

JS使用tween.js動畫庫實現(xiàn)輪播圖并且有切換功能

更新時間：2018年07月17日 11:48:11 作者：一只程序汪

本文通過實例代碼給大家介紹了JS使用tween.js動畫庫實現(xiàn)輪播圖并且有切換功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧

效果圖如下所示：

<!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");
 //記錄圖片下標(biāo)
 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;
 //動畫結(jié)束時間
 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);
 }
//關(guān)閉輪播
 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;
 //動畫結(jié)束時間
 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;
 //動畫結(jié)束時間
 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>

總結(jié)

以上所述是小編給大家介紹的JS使用tween.js動畫庫實現(xiàn)輪播圖并且有切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: