zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    【java】对象赋值给另一个对象
    spring boot系列(五)spring boot 配置spring data jpa (查询方法)
    Spring Data JPA 查询
    Spring Data JPA 介绍
    OpenID简介
    OAUTH协议介绍
    URL encoding(URL编码)
    RESTful 介绍
    spring boot系列(四)spring boot 配置spring data jpa (保存修改删除方法)
    spring boot 启动报 java.lang.NoClassDefFoundError: ch/qos/logback/core/spi/LifeCycle 错误
  • 原文地址:https://www.cnblogs.com/maoduoduo/p/3164641.html
Copyright © 2011-2022 走看看