缓动动画函数
传入三个参数，分别为：操作元素，操作属性，回调函数
原理： 将定时器ID存储在“操作元素”的属性中，每次调用函数先清除此“操作元素”原有的定时器，以解决动画抖动、多个定时器无法清理的问题。 操作属性可以有多个，以循环的方式遍历属性，当所有的动画完成后调用回调函数
function animate(ele,json,callback,loopTime) {
clearInterval(ele.timeId);
loopTime = loopTime?loopTime:20;
ele.timeId = setInterval(function () {
var flag = true;
for (var arr in json) {
if (arr === 'zIndex') {
ele.style[arr] = json[arr]; //z-index属性没有单位，直接设置
}else if (arr === 'opacity') {
var current = getStyle(ele,arr)*100; //将数值放大一百倍而不使用原有的小数方式
var target = json[arr]*100;
var step= (target - current)/10;
step = step<0?Math.floor(step):Math.ceil(step); //因为步移距离有正数和负数，所以需要判断取整方式。（0.2取1，向上取整，-0.2取-1，向下取整）
current += step;
ele.style[arr] = current/100;
}else {
var current = parseInt(getStyle(ele,arr));
var target = json[arr];
var step= (target - current)/10;
step = step<0?Math.floor(step):Math.ceil(step);
current += step;
ele.style[arr] = current+'px';
}
if (current !== target){
flag = false
}
}
if (flag){
clearInterval(ele.timeId);
if (callback){
callback();
}
}
console.log('目标位置：'+target+' 当前位置： '+current+'步移距离：'+step)
},loopTime)
}
上面得代码不够完美，至于缺点在哪就交给你们啦。下面是经过优化得代码。轮播图用得就是这段代码
function animate(ele,target,step,loopTime) {
var current = ele.offsetLeft;
// var target = 400;
step = step?step:10;
loopTime = loopTime?loopTime:20;
//这里传入的ele是一个对象，为对象添加了一个属性存储定时器ID。 因为这种方式底层是以内存地址引用的
//所以这里的属性会被全局保存下来
clearInterval(ele.timeToolId);
ele.timeToolId = setInterval(function () {
current += target>current?step:-step;
if ( Math.abs(target - current) > Math.abs(step)){
ele.style.left = current+'px';
} else {
ele.style.left = target+'px';
clearInterval(ele.timeToolId);
}
},loopTime)
}
旋转木马轮播图
思路： 首先以定位的方式布局，布局完成后在编写js代码。 将每个图片的位置存放到数组中，每次旋转时将数组的最后一位调换到第一位或反之（依据左右滚动而定）,再使用动画函数赋值。最后一张图片与第一章图片相同，这样形成无缝的效果。
素材我就不放了，交给各位自己度娘了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen"><!--相框-->
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script>
var box = document.getElementById('box');
var screen = box.children[0];
var screenWidth = screen.offsetWidth;
var ulObj = screen.children[0];
var olObj = screen.children[1];
var arr = document.getElementById('arr');
var arrLeft = document.getElementById('left');
var arrRight = document.getElementById('right');
var current = 0;
var timeId = 0;
ulObj.appendChild(ulObj.children[0].cloneNode(true));
for (var i=0;i<ulObj.children.length-1;i++){
var liObj = document.createElement("li");
liObj.innerHTML = i+1;
liObj.setAttribute('index',i);
liObj.onmouseover = function() {
animate(ulObj,-this.getAttribute('index')*screenWidth);
for (var j=0;j<olObj.children.length;j++) {
olObj.children[j].className='';
}
current = -this.getAttribute('index');
this.className = 'current';
};
olObj.appendChild(liObj);
}
olObj.children[0].className = 'current';
box.onmouseover = function () {
arr.style.display = 'block';
clearInterval(timeId);
};
box.onmouseout = function () {
arr.style.display = 'none';
timeId = setInterval(right,2000);
};
arrLeft.onclick = function () {
if (current !==0 ){
current++;
animate(ulObj,current*screenWidth);
for (var j=0;j<olObj.children.length;j++) {
olObj.children[j].className='';
}
olObj.children[Math.abs(current)].className='current';
}
};
arrRight.onclick = right;
function right() {
if (Math.abs(current)===ulObj.children.length-1){
current =0;
ulObj.style.left = '0px';
}
if (Math.abs(current)<ulObj.children.length-1) {
current--;
animate(ulObj,current*screenWidth);
for (var j=0;j<olObj.children.length;j++) {
olObj.children[j].className='';
}
if (Math.abs(current)===ulObj.children.length-1){
olObj.children[Math.abs(current)-1].className='';
olObj.children[0].className='current';
}else{
olObj.children[Math.abs(current)].className='current';
}
}
}
timeId = setInterval(right,2000);
</script>
</body>
</html>