封装一个animation函数
实现的动画效果是：最开始运动速度快，然后逐渐减小，并且到最后，速度为零，且正好到达目的地即目标所在的位置，在此过程中改变透明度，以及宽高，left、top这些值还要实现同时改变多个元素。
//封装一个getStyle()的函数，通过这个函数可以处理兼容性，来取得当前元素正在应用的样式， function getStyle(el,property) { if(getComputedStyle){ return getComputedStyle(el)[property];//ie8之后获取方式 }else{ return el.currentStyle[property]; //ie8以前 } } //参数：所改变的元素，改变的属性，目标(属性和目标合为properties) function animate(el,properties) { clearInterval(el.timerId); el.timerId=setInterval(function () { for(var property in properties){ var current; var target=properties[property]; if(property==='opacity'){ current=parseFloat(getStyle(el,'opacity'))*100; }else{ current=parseInt(getStyle(el,property)); } //当target和current相等时，速度就变为0，为了每次都缓慢变化，所以要乘以一个系数 var speed=(target-current)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(property==='opacity'){ el.style.opacity=(current+speed)/100; } el.style[property]=current+speed+"px"; } },20) }
水平轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .slider{ width: 700px; height: 504px; border: 5px solid rebeccapurple; position: relative; overflow: hidden; } .slider .list{ position: absolute; } .slider .list .item{ width: 700px; height: 504px; float: left; } .slider .list .item img{ width: 700px; height: 504px; display: block; } .slider .prev,.slider .next{ position: absolute; top: 245px; } .slider .next{ right: 0; } .slider .pagination { position: relative; top: 350px; } .slider .pagination .bullet{ width: 20px; height: 20px; background:black; border: 2px solid yellow; float: left; margin-left: 5px; color: white; text-align: center; line-height: 20px; cursor: pointer; } .slider .pagination .bullet.focus{ background-color: yellow; } </style> </head> <body> <div class="slider"> <ul class="list"> <li class="item"><img src="./images/1.jpeg" alt=""></li> <li class="item"><img src="./images/2.jpeg" alt=""></li> <li class="item"><img src="./images/3.jpeg" alt=""></li> <li class="item"><img src="./images/4.jpeg" alt=""></li> </ul> <button class="prev"><</button> <button class="next">></button> <ul class="pagination"> <li class="bullet focus">1</li> <li class="bullet">2</li> <li class="bullet">3</li> <li class="bullet">4</li> </ul> </div> <script src="animation.js"></script> <script> (function () { var currentIndex;//当前显示的索引 var lis;//所有的li var liWidth;//li的宽度 var len;//li的个数 var id; //是图片顺序排列为3 0 1 2 3 0 两边的两张是假定的，中间的四张是真正显示的长度 init(); function init() { currentIndex=1; var li_1=document.querySelector('.slider .list .item:first-of-type'); var copy_1=li_1.cloneNode(true); var li_last=document.querySelector('.slider .list .item:last-of-type'); var copy_last=li_last.cloneNode(true); var list=document.querySelector('.slider .list'); list.appendChild(copy_1); list.insertBefore(copy_last,li_1); //根据list的长度，设定ul的宽度 lis=document.querySelectorAll('.slider .list .item');//取到所有的li liWidth=lis[0].offsetWidth; len=lis.length;//6 list.style.width=liWidth*len+"px";//ul的宽度 document.querySelector('.prev').onclick=function () { sliderPrev(); }; document.querySelector('.next').onclick=function () { sliderNext(); }; list.style.left=-liWidth+"px"; var bullets=document.querySelectorAll('.slider .pagination .bullet'); for(var i=0;i<bullets.length;i++){ bullets[i].index=i; bullets[i].onclick=function () { index=this.index+1; sliderTo(index); } } auto(); var slider=document.querySelector('.slider'); //鼠标移入，停止自动轮播 slider.onmouseover=function () { stop(); }; //鼠标移出，开始自动轮播 slider.onmouseout=function () { auto(); }; } //显示下一张函数 function sliderPrev() { currentIndex--; sliderTo(currentIndex); } //显示前一张函数 function sliderNext() { currentIndex++; sliderTo(currentIndex); } //图片切换 function sliderTo(index) { var list=document.querySelector('.slider .list'); if(index===len){ currentIndex=index=2; list.style.left=-liWidth+"px"; } if(index===-1){ currentIndex=index=3; list.style.left=-(4*liWidth)+"px"; } var left=-index*liWidth; animate(list,{ left:left }); var focusIndex; var bullets=document.querySelectorAll('.pagination .bullet'); for(var i=0;i<bullets.length;i++){ if(index===0){ focusIndex=bullets.length-1; }else if(index===5){ focusIndex=0; }else{ focusIndex=index-1; } } document.querySelector('.focus').className='bullet'; bullets[focusIndex].className='bullet focus'; } //自动轮播 function auto() { clearInterval(id); id=setInterval(function () { sliderNext(); },2000) } //停止自动轮播 function stop() { clearInterval(id); } })() </script> </body> </html>
透明度轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .slider{ width: 700px; height: 504px; border: 5px solid rebeccapurple; position: relative; } .slider .list .item{ position: absolute; left: 0; top: 0; opacity: 0; } .slider .list .item:nth-of-type(1){ opacity: 1; } .slider .list .item img{ width: 700px; height: 504px; display: block; } .slider .prev,.slider .next{ position: absolute; top: 245px; } .slider .next{ right: 0; } .slider .pagination{ position: relative; top: 350px; } .slider .pagination .bullet{ width: 20px; height: 20px; background:black; border: 2px solid yellow; float: left; margin-left: 5px; color: white; text-align: center; line-height: 20px; cursor: pointer; } .slider .pagination .bullet.focus{ background-color: yellow; } </style> </head> <body> <div class="slider"> <ul class="list"> <li class="item"><img src="./images/1.jpeg" alt=""></li> <li class="item"><img src="./images/2.jpeg" alt=""></li> <li class="item"><img src="./images/3.jpeg" alt=""></li> <li class="item"><img src="./images/4.jpeg" alt=""></li> </ul> <button class="prev"><</button> <button class="next">></button> <ul class="pagination"> <li class="bullet focus">1</li> <li class="bullet">2</li> <li class="bullet">3</li> <li class="bullet">4</li> </ul> </div> <script src="animation.js"></script> <script> /* 立即执行函数：声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行； (function(){})() 可以避免污染全局作用域*/ (function () { //切换时前一张的索引，和后一张的索引 var prevIndex,nextIndex; var len; var id; init(); function init() { prevIndex=nextIndex=0; len=document.querySelectorAll('.list .item').length; document.querySelector('.prev').onclick=function(){ sliderPrev() }; document.querySelector('.next').onclick=function () { sliderNext() }; var bullets=document.querySelectorAll('.slider .pagination .bullet'); for(var i=0;i<bullets.length;i++){ bullets[i].index=i; bullets[i].onclick=function () { prevIndex=nextIndex; nextIndex=this.index; sliderTo(prevIndex,nextIndex); } } auto(); var slider=document.querySelector('.slider'); //鼠标移入，停止自动轮播 slider.onmouseover=function () { stop(); }; //鼠标移出，开始自动轮播 slider.onmouseout=function () { auto(); }; } //处理点击prev button时的动作，计算prevIndex function sliderPrev(){ prevIndex=nextIndex; nextIndex--; if(nextIndex===-1){ nextIndex=len-1; } sliderTo(prevIndex,nextIndex); } //处理点击next button时的动作，计算nextIndex function sliderNext() { prevIndex=nextIndex; nextIndex++; if(nextIndex===len){ nextIndex=0; } sliderTo(prevIndex,nextIndex); } //参数为：前一张图片的索引，和后一张图片的索引 function sliderTo(prev,next) { var lis=document.querySelectorAll('.list .item'); var bullets=document.querySelectorAll('.slider .pagination .bullet'); bullets[prev].className='bullet'; bullets[next].className='bullet focus'; animate(lis[prev],{opacity:0}); animate(lis[next],{opacity:100}) } //自动轮播函数 function auto() { clearInterval(id); id=setInterval(function () { sliderNext(); },2000) } //停止自动轮播 function stop() { clearInterval(id); } })() </script> </body> </html>