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 var变量隐式声明方法
Oct 19 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
如何利用js在两个html窗口间通信
Apr 27 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
总结一些js自定义的函数
2006/08/05 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
vue cli 全面解析
2018/02/28 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python 创建子进程模块subprocess详解
2015/04/08 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
10个示例带你掌握python中的元组
2020/11/23 Python
大学生职业生涯规划书模版
2013/12/30 职场文书
大学生思想汇报范文
2013/12/31 职场文书
服务员岗位责任制
2014/02/11 职场文书
竞争上岗实施方案
2014/03/21 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS