版权声明： https://blog.csdn.net/q1403539144/article/details/91389695
缓动动画函数
传入三个参数，分别为：操作元素，操作属性，回调函数
原理： 将定时器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> 文章来源: https://blog.csdn.net/q1403539144/article/details/91389695