效果图如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="UTF-8">
< >Document</ >
<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>
< src="./tween.js"></ >
< >
//获取元素
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]. = 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]. = 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]. = function(){
// box.style.left = (-500*(i-2))+"px";
clearAuto();
indexImg(i);
console.log(i);
}
})(i);
}
</ >
</html>
总结
以上所述是小编给大家介绍的JS使用tween.js动画库实现轮播图并且有切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
继续阅读与本文标签相同的文章
下一篇 :
带你读《深入理解以太坊》之一：以太坊概述
-
USB HOST与 USB OTG的区别及工作原理
2026-05-16栏目： 教程
-
干货技巧 | phpinfo信息利用
2026-05-16栏目： 教程
-
K8S 生态周报| Helm v2 爆出全版本漏洞
2026-05-16栏目： 教程
-
Spring Boot 2.X(十四)：日志功能 Logback
2026-05-16栏目： 教程
-
车老哥手把手带你配置AI项目的环境
2026-05-16栏目： 教程