JS使用tween.js动画库实现轮播图并且有切换功能
程序员文章站
2022-04-18 18:57:05
效果图如下所示：
效果图如下所示：
<!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动画库实现轮播图并且有切换功能，希望对大家有所帮助