17.tb幻灯片上下滑动；

类似与无缝滚动；上下滑动的是整个ul标签，是ul的top距离与图片序号之前的关系；

当显示第1章图片，top为：图片高度-height*0;

　　　　2章　　　　　　　　　　  -height*1;

　　　　3　　　　　　　　　　　  -height*2;

　　　　n　　　　　　　　　　　  -height*(n-1);

<script src="../move2.js"></script>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('play');
    var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    
    var now=0;
    
    for(var i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=function ()
        {
            now=this.index;
            
            tab();
        };
    }
    
    function tab()
    {
        for(var i=0;i<aBtn.length;i++)
        {
            aBtn[i].className='';
        }
        aBtn[now].className='active';
        startMove(oUl, {top: -150*now});
    }
    
    function next()
    {
        now++;
        if(now==aBtn.length)
        {
            now=0;
        }
        
        tab();
    }
    
    var timer=setInterval(next, 2000);
    
    oDiv.onmouseover=function ()
    {
        clearInterval(timer);
    };
    
    oDiv.onmouseout=function ()
    {
        timer=setInterval(next, 2000);
    };
};
</script>
<body>

<div class="play" id="play">
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
    </ul>
</div>
</body>

 

posted @ 2013-07-01 12:27  猫多多  阅读(207)  评论(0)  编辑  收藏  举报