溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么JS中使用tween.js動畫庫實現輪播圖？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
<!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");
//記錄圖片下標
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<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>關于怎么JS中使用tween.js動畫庫實現輪播圖問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
