JS使用tween.js动画库实现轮播图并且有切换功能

更新时间：2018年07月17日 11:48:11 作者：一只程序汪

本文通过实例代码给大家介绍了JS使用tween.js动画库实现轮播图并且有切换功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧

效果图如下所示：

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

您可能感兴趣的文章:

JavaScript指定断点操作实例教程
这篇文章主要给大家介绍了关于JavaScript指定断点操作的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-09-09
如何使用js查找数组中符合条件的元素
这篇文章主要给大家介绍了关于如何使用js查找数组中符合条件的元素,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-04-04
JS实现往下不断流动网页背景的方法
这篇文章主要介绍了JS实现往下不断流动网页背景的方法,实例分析了递归调用自定义函数scrollBG实现动态背景特效的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
D3.js实现折线图的方法详解
众所周知图表是数据图形化的表示，通过形象的图表来展示数据，比如条形图，折线图，饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据，提高生产的效率和 Web 应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现折线图。
2016-09-09
JavaScript动态插入script的基本思路及实现函数
偶尔需要动态插入javascript代码的需求，基本思路是动态创建一个script标签，设置其src属性，type属性等，需要的朋友可以参考下
2013-11-11
javascript实现10个球随机运动、碰撞实例详解
这篇文章主要介绍了javascript实现10个球随机运动、碰撞的方法,实例分析了javascript实现小球碰撞的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
微信小程序实现点赞、取消点赞功能
这篇文章主要为大家详细介绍了微信小程序实现点赞、取消点赞，和多项点击功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
微信小程序接入腾讯地图的两种写法
这篇文章主要介绍了微信小程序接入腾讯地图的两种写法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
Javascript 对象（object）合并操作实例分析
这篇文章主要介绍了Javascript 对象（object）合并操作,结合实例形式分析了javascript基于jQuery的extend方法、对象属性、遍历赋值等操作实现对象合并相关操作技巧与使用注意事项,需要的朋友可以参考下
2019-07-07
微信小程序授权获取用户详细信息openid的实例详解
这篇文章主要介绍了微信小程序授权获取用户详细信息openid的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-09-09