妙味——图片无缝自动播放

<!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;position: relative;overflow: hidden;}
#big{width: 600px;height: 300px;position: absolute;left: 0;top: 0;}
#big li{width: 600px;height: 300px;list-style-type: none;}
.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 _height=aBig[0].offsetHeight;    //获取li的高度
    var oSmall=document.getElementById('small');
    var aSmall=oSmall.getElementsByTagName('li');
    var iNow=0;
    var iNow2=0;
    var timer=null;

    for(var i=0;i<aSmall.length;i++){
        aSmall[i].index=i;
        aSmall[i].onmouseover=function(){
            for(var i=0;i<aSmall.length;i++){
                aSmall[i].className='';
            }
            this.className='active';

            iNow=this.index;    //更新iNow
            iNow2=this.index;

            startMove(oBig,{top:-(this.index*_height)});
        };
    }

    timer=setInterval(aotoRun,2000);

    //鼠标移入清除定时器
    oBox.onmouseover=function(){
        clearInterval(timer);
    };

    //鼠标移除开启定时器
    oBox.onmouseout=function(){
        timer=setInterval(aotoRun,2000);
    };

    //自动播放
    function aotoRun(){

        //循环之后取消定位重置iNow2
        if(iNow==0)
        {
            aBig[0].style.position='static';
            oBig.style.top='0';
            iNow2=0;
        }

        if(iNow == aBig.length-1){
            iNow=0;
            aBig[0].style.position='relative';        //设置第一个定位
            aBig[0].style.top=aBig.length*_height+'px';
        }
        else{
            iNow++;
        }

        iNow2++;

        for(var i=0;i<aSmall.length;i++){
            aSmall[i].className='';
        }
        aSmall[iNow].className='active';
        startMove(oBig,{top:-(iNow2*_height)});
    };
};
</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>
高否？富否？帅否？否？滚去学习！