妙味——只滑动一次的图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#show-box{width: 600px;height: 300px;border: 5px solid #ccc;margin: 50px auto 0;overflow: hidden;position: relative;}
#big{width: 600px;height: 300px;position: relative;}
#big li{width: 600px;height: 300px;list-style-type: none;position: absolute;top: 0;}
.no1{background-color: #0099FF}
.no2{background-color: #00CCFF}
.no3{background-color: #00FFFF}
.no4{background-color: #00FF33}
.no5{background-color: #FF99CC}
#small{position: absolute;left: 50px;bottom: 20px;z-index: 2;}
#small li{display: block;width: 20px;height: 20px;line-height: 20px;border: 1px solid orange;margin-right: 10px;text-align: center;color: #000000;cursor: pointer;float: left;}
#small li.active{background-color: orange;color: #ffffff;font-weight: bold;}
</style>
<script src="http://files.cnblogs.com/baixc/move.js"></script>
<script>
window.onload=function()
{
    var oBox=document.getElementById('show-box');
    var oBig=document.getElementById('big');
    var aBig=oBig.getElementsByTagName('li');
    var _width=aBig[0].offsetWidth;    //获取li的高度
    var oSmall=document.getElementById('small');
    var aSmall=oSmall.getElementsByTagName('li');
    var iNow=0;
    var bBtn=true;

    //定位除第一个之外的li在右边
    for (var i = 1; i < aBig.length; i++) {
        aBig[i].style.left=_width+'px';
    };
 
    for(var i=0;i<aSmall.length;i++){
        aSmall[i].index=i;
        aSmall[i].onmouseover=function(){

            if(bBtn)
            {
                bBtn = false;
                for (var i = 0; i < aSmall.length; i++) {
                    aSmall[i].className='';
                };

                this.className='active';

                if(iNow < this.index)
                {
                    aBig[this.index].style.left=_width+'px';
                    startMove(aBig[iNow],{left:-_width});
                }
                else if(iNow > this.index)
                {
                    aBig[this.index].style.left=-_width+'px';
                    startMove(aBig[iNow],{left:_width});
                }

                startMove(aBig[this.index],{left:0},function(){
                    bBtn=true;
                });

                iNow=this.index;
            }
        };
    }

};
</script>
</head>
<body>
    <div id="show-box">
        <ul id="big">
            <li class="no1">1</li>
            <li class="no2">2</li>
            <li class="no3">3</li>
            <li class="no4">4</li>
            <li class="no5">5</li>
        </ul>
        <ol id="small">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
</html>
高否？富否？帅否？否？滚去学习！