效果图如下所示：

！DOCTYPE html html lang=' zh-CN ' head meta charset=' UTF-8 '标题文档/标题样式.包装{宽度： 500像素重量： 300像素相对位置：飞越：隐藏；} .盒子{宽度： 500%；高度： 100%;绝对位置：左： 0；} .box div { width : 500 pxh three : 300 px向左浮动：font-size : 100 px文本对齐：中心；线高： 300像素；} div : th-child(1){底色：红色；} div : th-child(2){背景色：绿色；} div : th-child(3){背景色：粉色；}第：分区-儿童(4){ 0背景色-颜色：蓝色；}/样式/床头柜输入类型='按钮'值='最后'输入类型='按钮'值='下一个'输入类型='按钮'值='按钮1' class='ha '输入类型='按钮'值='按钮2' class='ha '输入类型='按钮'值='按钮3' class='ha '输入类型='按钮'值='按钮4 ' class=' ha ' div class=' wrap ' div class=' box ' div id=' one ' div 1/div 2/div 3/div 4/div div id=' one ' div 1/div/div/div/body script src=' http 3360 ./tween。js//script script//获取元素var inps=文档。query selectorall(' input ')；var box=document.querySelector(' .方框');var ha=文档。queryselectorall(' ."哈');//记录图片下标定义变量索引=0;var w=-500；定义变量计时器=null/自动播放//放在计时器就是自动播放，骑士就是下一张的操作函数automg(){ index；if(索引3){//console。日志(索引)；索引=0;//console.log(索引);} //动画开始时间var t=0；//动画结束时间var d=30/动画的起始位置var b=box.offsetLeft//动画的终止位置减去动画的起始位置，该变量为-500//var c=指数* w-b；控制台。日志(c)；var c=-500；if(b=-1500){ b=0；} clearInterval(计时器);timer=SetInterval(function(){ t；box.style.left=Tween .线性(t，b，c，d)' px '；if(t=d){ clearInterval(定时器);} },30);}//关闭轮播函数ClearAutO(){ ClearInterval(自动定时器)；自动定时器=设定间隔(automg，3000)；} var auto timer=SetInterval(auto img，3000)；//下一张inps[1].onclick=function(){ clearAuto()；auto Img()；} //上一张函数prevImg(){ index-；if(index 0){ index=3；} //动画开始时间var t=0；//动画结束时间var d=30/动画的起始位置var b=box.offsetLeft//动画的终止位置减去动画的起始位置var c=指数* w-b；clearInterval(计时器);timer=SetInterval(function(){ t；box.style.left=Tween .线性(t，b，c，d)' px '；if(t=d){ clearInterval(定时器);} },30);} inps[0].onclick=function(){ clearAuto()；prevImg()；}函数index img(n){ index=n；var t=0；//动画结束时间var d=30/动画的起始位置var b=box.offsetLeft//动画的终止位置减去动画的起始位置var c=指数* w-b；clearInterval(计时器);timer=SetInterval(function(){ t；box.style.left=Tween .线性(t，b，c，d)' px '；if(t=d){ clearInterval(定时器);} },30);} for(var I=0；IHA . lenhei){(函数我){哈[我].onclick=function(){//box。风格。left=(-500 *(I-2))“px”；clearAuto()；指数img(I)；控制台。日志(一)；} })(一)；}/脚本/html总结

以上所述是小编给大家介绍的射流研究…使用tween.js动画库实现轮播图并且有切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！