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的Date对象
Nov 19 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
详解JS WebSocket断开原因和心跳机制
May 07 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
ThinkPHP数据操作方法总结
2015/09/28 PHP
Javascript typeof 用法
2008/12/28 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python可变参数函数用法实例
2015/07/07 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Django实现学生管理系统
2019/02/26 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
Unix/Linux开发面试题
2016/08/16 面试题
预备党员承诺书
2014/03/25 职场文书
员工团队活动方案
2014/08/28 职场文书
教师党员个人自我评价
2015/03/04 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
入团介绍人意见范文
2015/06/04 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript