溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么JS中使用tween.js動(dòng)畫庫實(shí)現(xiàn)輪播圖

發(fā)布時(shí)間：2021-06-02 17:02:55 來源：億速云 閱讀：184 作者：Leah 欄目：web開發(fā)

怎么JS中使用tween.js動(dòng)畫庫實(shí)現(xiàn)輪播圖？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎ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;
 //自動(dòng)播放
 //放在計(jì)時(shí)器就是自動(dòng)播放,騎士就是下一張的操作
 function autoImg(){
 index++;
 if(index>3){
  // console.log(index);
  index=0;
  // console.log(index);
 }
 //動(dòng)畫開始時(shí)間
 var t = 0;
 //動(dòng)畫結(jié)束時(shí)間
 var d = 30;
 //動(dòng)畫的起始位置
 var b = box.offsetLeft;
 //動(dòng)畫的終止位置減去動(dòng)畫的起始位置,該變量為-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;
 }
 //動(dòng)畫開始時(shí)間
 var t = 0;
 //動(dòng)畫結(jié)束時(shí)間
 var d = 30;
 //動(dòng)畫的起始位置
 var b = box.offsetLeft;
 //動(dòng)畫的終止位置減去動(dòng)畫的起始位置
 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;
 //動(dòng)畫結(jié)束時(shí)間
 var d = 30;
 //動(dòng)畫的起始位置
 var b = box.offsetLeft;
 //動(dòng)畫的終止位置減去動(dòng)畫的起始位置
 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>

關(guān)于怎么JS中使用tween.js動(dòng)畫庫實(shí)現(xiàn)輪播圖問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手