现在图片走马灯和轮播的效果越来越多了，很多人都是直接拿来插件就用，也不知道原理是什么。今天小编就给大家介绍下走马灯的原理以及原生js的demo。首先看下效果图：

可以鼠标左右点击实现切换，也可以点击下面的图片实现切换。

主要的脚本：

function getByClass(oParent, sClass)  //通过class获取元素

{

var aEle=oParent.getElementsByTagName('*');

var aResult=[];

 

for(var i=0;i<aEle.length;i++)

{

if(aEle[i].className==sClass)

{

aResult.push(aEle[i]);

}

}

 

return aResult;

}

 

window.onload=function ()//页面加载好的时候触发

{

var oDiv=document.getElementById('playimages');

var oBtnPrev=getByClass(oDiv, 'prev')[0];

var oBtnNext=getByClass(oDiv, 'next')[0];

var oMarkLeft=getByClass(oDiv, 'mark_left')[0];

var oMarkRight=getByClass(oDiv, 'mark_right')[0];

 

var oDivSmall=getByClass(oDiv, 'small_pic')[0];

var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];

var aLiSmall=oDivSmall.getElementsByTagName('li');

 

var oUlBig=getByClass(oDiv, 'big_pic')[0];

var aLiBig=oUlBig.getElementsByTagName('li');

 

var nowZIndex=2;

 

var now=0;

 

oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';

 

//左右按钮

oBtnPrev.onmouseover=oMarkLeft.onmouseover=function ()

{

startMove(oBtnPrev, 'opacity', 100);

};

oBtnPrev.onmouseout=oMarkLeft.onmouseout=function ()

{

startMove(oBtnPrev, 'opacity', 0);

};

oBtnNext.onmouseover=oMarkRight.onmouseover=function ()

{

startMove(oBtnNext, 'opacity', 100);

};

oBtnNext.onmouseout=oMarkRight.onmouseout=function ()

{

startMove(oBtnNext, 'opacity', 0);

};

 

//大图切换

for(var i=0;i<aLiSmall.length;i++)

{

aLiSmall[i].index=i;

aLiSmall[i].onclick=function ()

{

if(this.index==now)return;

 

now=this.index;

 

tab();

};

 

aLiSmall[i].onmouseover=function ()

{

startMove(this, 'opacity', 100);

};

aLiSmall[i].onmouseout=function ()

{

if(this.index!=now)

{

startMove(this, 'opacity', 60);

}

};

}

 

function tab()

{

aLiBig[now].style.zIndex=nowZIndex++;

 

for(var i=0;i<aLiSmall.length;i++)

{

startMove(aLiSmall[i], 'opacity', 60);

}

 

startMove(aLiSmall[now], 'opacity', 100);

 

aLiBig[now].style.height=0;

startMove(aLiBig[now], 'height', 320);

 

if(now==0)

{

startMove(oUlSmall, 'left', 0);

}

else if(now==aLiSmall.length-1)

{

startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth);

}

else

{

startMove(oUlSmall, 'left', -(now-1)*aLiSmall[0].offsetWidth);

}

}

 

oBtnPrev.onclick=function ()

{

now--;

if(now==-1)

{

now=aLiSmall.length-1;

}

 

tab();

};

 

oBtnNext.onclick=function ()

{

now++;

if(now==aLiSmall.length)

{

now=0;

}

 

tab();

};

 

var timer=setInterval(oBtnNext.onclick, 2000);

 

oDiv.onmouseover=function ()

{

clearInterval(timer);

};

oDiv.onmouseout=function ()

{

timer=setInterval(oBtnNext.onclick, 2000);

};

};

<div id="playimages" class="play">

    <ul class="big_pic">

 

<div class="prev"></div>

<div class="next"></div>

 

<div class="text">加载图片说明……</div>

<div class="length">计算图片数量……</div>

 

<a class="mark_left" href="javascript:;"></a>

<a class="mark_right" href="javascript:;"></a>

<div class="bg"></div>

 

        <li style="z-index:1;"><img src="images/1.jpg" /></li>

        <li><img src="images/2.jpg" /></li>

        <li><img src="images/3.jpg" /></li>

        <li><img src="images/4.jpg" /></li>

        <li><img src="images/5.jpg" /></li>

        <li><img src="images/6.jpg" /></li>

    </ul>

    <div class="small_pic">

        <ul style="width:390px;">

            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>

            <li><img src="images/2.jpg" /></li>

            <li><img src="images/3.jpg" /></li>

            <li><img src="images/4.jpg" /></li>

            <li><img src="images/5.jpg" /></li>

            <li><img src="images/6.jpg" /></li>

        </ul>

    </div>

</div>

​78oa编辑所撰。