效果图如下所示：
<!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动画库实现轮播图并且有切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
下载本文