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


Posted in Javascript onJuly 17, 2018

效果图如下所示:

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 attachEvent传递参数的办法
Dec 14 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
js运动动画的八个知识点
Mar 12 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
vue实现动态按钮功能
May 13 Javascript
ES6对象操作实例详解
May 23 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
SVG实现时钟效果
Jul 17 #Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 #Javascript
基于D3.js实现时钟效果
Jul 17 #Javascript
vue生成token并保存到本地存储中
Jul 17 #Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 #Javascript
使用svg实现动态时钟效果
Jul 17 #Javascript
详解.vue文件中style标签的几个标识符
Jul 17 #Javascript
You might like
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
checkbox使用示例
2013/08/23 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
采用call方式实现js继承
2014/05/20 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
理解Python中的With语句
2016/03/18 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
人民教师的自我评价分享
2014/02/21 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
股权转让协议书范本
2014/04/12 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
交通安全主题班会
2015/08/12 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python