<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style: none; margin: 0; padding: 0; width: 30000px; } ul li.active{ width: 550px; } ul li{ float: left; position: relative; height: 254px; width: 22px; overflow: hidden; } ul li img{ width: 660px; height: 254px; } ul li span{ width: 22px; position: absolute; top: 0; left: 0; height: 204px; padding-top: 50px; } ul li span.bg1{ background: #333; } ul li span.bg2{ background: #0f0; } ul li span.bg3{ background: #ff7500; } ul li span.bg4{ background: #0ff; } ul li span.bg5{ background: #00f; } </style> <script type="text/javascript"> window.onload=function () { createAccordion('.showBox'); }; function createAccordion(name) { /*获取元素*/ var oDiv=document.querySelector(name); /*声明最小宽度*/ var iMinWidth=9999999; /*获取元素*/ var aLi=oDiv.getElementsByTagName('li'); var aSpan=oDiv.getElementsByTagName('span'); /*定时器容器默认*/ oDiv.timer=null; /*循环添加事件和自定义属性索引值*/ for(vari=0;i<aSpan.length;i++) { aSpan[i].index=i; aSpan[i].onmouseover=function () { gotoImg(oDiv, this.index, iMinWidth); }; /*获取最小宽度*/ iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth); } }; function gotoImg(oDiv, iIndex, iMinWidth) { if(oDiv.timer) { /*清除定时器，避免叠加*/ clearInterval(oDiv.timer); } /*开启定时器*/ oDiv.timer=setInterval ( function () { changeWidthInner(oDiv, iIndex, iMinWidth); }, 30 ); } /*这里是关键，运动*/ function changeWidthInner(oDiv, iIndex, iMinWidth) { var aLi=oDiv.getElementsByTagName('li'); var aSpan=oDiv.getElementsByTagName('span'); /*获取盒子的大小，这个是总宽度*/ var iWidth=oDiv.offsetWidth; /*缩进去的图片的宽度声明*/ var w=0; /*判断的声明,为了清除定时器声明*/ var bEnd=true; /*循环为了把每个图片都循环一遍，为了获取伸进和缩去的元素*/ for(var i=0;i<aLi.length;i++) { /*这为获取伸进的索引*/ if(i==iIndex) { continue; } /*这里是没有变动的元素，所以都保存最小宽度*/ if(iMinWidth==aLi[i].offsetWidth) { /*总宽度减去这些宽度,因为他们也在总宽度里*/ iWidth-=iMinWidth; continue; } /*走以下的循环里代码的是缩去的元素*/ /*不清除定时器，还没运动完*/ bEnd=false; /*获取速度,先快后慢*/ speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10); /*缩去剩下的宽度*/ w=aLi[i].offsetWidth-speed; /*为避免缩去元素小于最小宽度*/ if(w<=iMinWidth) { w=iMinWidth; } /*设置缩去元素的宽度*/ aLi[i].style.width=w+'px'; /*减去缩去的宽度，剩下的就是伸进的宽度*/ iWidth-=w; } /*伸进元素的宽度*/ aLi[iIndex].style.width=iWidth+'px'; if(bEnd) { clearInterval(oDiv.timer); oDiv.timer=null; } } </script> </head> <body> <div> <ul> <li><span>这是第一个</span><img src="https://www.jb51.net/article/1.jpg" alt=""></li> <li><span>这是第二个</span><img src="https://www.jb51.net/article/2.jpeg" alt=""></li> <li><span>这是第三个</span><img src="https://www.jb51.net/article/3.jpg" alt=""></li> <li><span>这是第四个</span><img src="https://www.jb51.net/article/4.jpg" alt=""></li> <li><span>这是第五个</span><img src="https://www.jb51.net/article/5.jpg" alt=""></li> </ul> </div> </body> </html>
接下来的都是会使用到动画效果，既然这样就把封装好运动：
/*使用调用，obj对象，attr属性，speed速度，iTarget想达到的值，fn回调函数*/ /*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了， 其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线 */ function doMove(obj,attr,speed,iTarget,fn){ if(attr=="opacity"){ obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100; }else{ obj.len=iTarget-parseFloat(getStyle(obj,attr)); } /*这里判断方向，在初始点后的为负数，在初始点前为正数*/ speed=obj.len>0?speed:-speed; clearInterval(obj.timer); obj.timer=setInterval(function(){ if(!obj.num){ obj.num=0; } if(attr=="opacity"){ obj.num=parseFloat(getStyle(obj,attr))*100+speed; }else{ obj.num=parseInt(getStyle(obj,attr))+speed; } /*这里是判断到了目标点没有，到了就停止定时器*/ if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){ obj.num=iTarget; clearInterval(obj.timer); } if(attr=="opacity"){ obj.style[attr]=obj.num/100; }else{ obj.style[attr]=obj.num+"px"; } /*因为放在上面无法实现到回调函数的完整作用，出现一些BUG*/ if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){ fn && fn(); } },30); } /*获取css属性值的，会获取表现出现的值*/ function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; }
轮播图：
