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动画库实现轮播图并且有切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
详解tween.js 中文使用指南
补间(动画)是一个概念,允许你以平滑的方式更改对象的属性.你只需告诉它哪些属性要更改,当补间结束运行时它们应该具有哪些最终值,以及这需要多长时间,补间引擎将负责计算从起始点到结束点的值. 例如,position对象拥有x和y两个坐标: var position = { x: 100, y: 0 } 如果你想将x坐标的值从100变成200,你应该这么做: // 首先为位置创建一个补间(tween) var tween = new TWEEN.Tween(position); // 然后告诉 twe
-
原生JS实现移动端web轮播图详解（结合Tween算法造轮子）
前言 相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改. 所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求; 另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大. 在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个小时的思考和实践终于还是实现了(如图): 实现移动端的轮播图要
-
javascript中的缓动效果实现程序
常见的动画有四种类型,介绍一下: linear:线性动画,即匀速 easeIn:速度从小到大,即淡入 easeOut :速度从大到小,即淡出 easeInOut:开始时速度从小到大,结束时速度从大到小,即淡入淡出 其实说到缓动,就不得不提Robert Penner,他发明了N多缓动公式,举个例子 我还是解释一下吧: 设当前变化量为X,则 t / d = X / c,所以X = c * t / d,然后X + b就可以获得当前属性值 再看一个稍复杂的: 这个有淡入效果,也就是说动画开始时,值的变化
-
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
本文实例讲述了JS+HTML5手机开发之滚动和惯性缓动实现方法.分享给大家供大家参考,具体如下: 1. 滚动 以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='content'内容区域/div /div Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现 2)js 编程实现 思路:对比手指在屏幕上移动前后位置变化
-
详解tween.js的使用教程
前面的话 TweenJS提供了一个简单但强大的渐变界面.它支持渐变的数字对象属性&CSS样式属性,并允许链接补间动画和行动结合起来,创造出复杂的序列.本文将详细介绍tween.js的使用 概述 tween.js允许以平滑的方式修改元素的属性值.只需要告诉tween想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效果 例如,假设有一个对象position,它的坐标为 x 和 y: var positio
-
js学习心得_一个简单的动画库封装tween.js
具体代码如下: ~function(){ var myEffect = { Linear:function(t,b,c,d){ return c*t/d+b }, Quad: {//二次方的缓动(t^2): easeIn: function(t,b,c,d){ return c*(t/=d)*t + b; }, easeOut: function(t,b,c,d){ return -c *(t/=d)*(t-2) + b; }, easeInOut: function(t,b,c,d){ if
-
tweenjs缓动算法的使用实例分析
本文实例讲述了tweenjs缓动算法的使用.分享给大家供大家参考,具体如下: 这里的tweenjs不是依托于createjs的tewwnjs,而是一系列缓动算法集合.因为本身是算法,可以用在各个业务场景中,这也正是总结学习它的价值所在.tweenjs代码详情: /* * Tween.js * t: current time(当前时间): * b: beginning value(初始值): * c: change in value(变化量): * d: duration(持续时间). * you
-
JavaScript Tween算法及缓动效果第1/2页
我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. Tween Tween类型: Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce ease类型: easeIn easeOut easeInOut /* 算法来源:http://www.robertpenner.com/easing/ */ var Tw
-
tween.js缓动补间动画算法示例
一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开始前,是需要先确定好的. 首先引入一个概念就补间动画 Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢? 相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一
-
JavaScript实现的Tween算法及缓冲特效实例代码
本文实例讲述了JavaScript实现的Tween算法及缓冲特效.分享给大家供大家参考,具体如下: 这里演示Tween 算法及缓冲特效的JavaScript代码,利用它可以做缓动.弹簧等很多动画效果,怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果呢,看懂了本代码你就明白了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tween-run-style-codes/ 具体代码如下: <!DOC
-
JS Tween 颜色渐变
有31中缓动算法,实现了颜色的自动转换(#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式,最后返回#ff0000格式).px单位的自动转换. 调用接口: /** * 对外接口 * Tween的示例 * @param startProps 开始属性,单个属性或者数组 * @param endProps 结束属性,单个属性或者数组 * @param timeSeconds 运动消耗时间,单位秒 * @param animType 动作类型,字符串型,内部自己转换算子 * @par