效果图如下所示：
<!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动画库实现轮播图并且有切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
© 版权声明
THE END
暂无评论内容