zoukankan html css js c++ java

无缝滚动，JavaScript

好想哭，不容易啊，终于磕磕绊绊写了一个稍微难一点的东西了，还是要多写几遍啊

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            window.onload=function()
            {
                var odiv=document.getElementById('div1');
                var oul=document.getElementById('ul1');
                var oli=oul.getElementsByTagName('li');
                var speed=2;
                var oa=document.getElementsByTagName('a');
                oul.innerHTML=oul.innerHTML+oul.innerHTML;
                oul.style.width=oli[0].offsetWidth*oli.length+'px'
                function move()
                {
                    if(oul.offsetLeft<-oul.offsetWidth/2){
                        oul.style.left='0';
                    }
                    if(oul.offsetLeft>0){
                        oul.style.left=-oul.offsetWidth/2+'px';
                    }
                    oul.style.left=oul.offsetLeft+speed+'px';
                };
                
                var timr=setInterval(move,30);
                odiv.onmouseover=function(){
                    clearInterval(timr);
                }
                odiv.onmouseout=function(){
                    timr=setInterval(move,30);
                }
                oa[0].onclick=function(){
                    speed=-2;
                }
                oa[1].onclick=function(){
                    speed=2;
                }
            };
        </script>
        <style>
            *{padding: 0;margin: 0;}
            
            #div1{position: relative; background: blueviolet;width: 1128px;height: 250px; margin: 0 auto;overflow: hidden;}
            ul{position: absolute; left:0;top:0;width: 1128px;height: 250px; }
            li{float: left;list-style: none;}
        </style>
    </head>
    <body>
        <a href="#">zuo</a>
        <a href="#">you</a>
        <div id="div1">
            <ul id="ul1">
                <li><img src="img/1.jpg"></li>
                <li><img src="img/2.jpg"></li>
                <li><img src="img/3.jpg"></li>
            </ul>
        </div>
    </body>
</html>

定时器，每30毫秒执行一次，变动left的值

鼠标移入的时候关闭定时器

鼠标离开的时候开打定时器

定义变量speed 点you的时候speed成为-2 图片向友滚动

点zuo的时候，speed成为2，图片向左滚动

还是要多写几遍的。。。。

查看全文

相关阅读:
Bootstrap（标准顶部导航条）
Bootstrap基础5（各类型导航）
Bootstrap基础4（导航栏与下拉列表）
Bootstrap（导航条）
Bootstrap基础3（表单）
Bootstrap基础2（图片与辅助样式）
Bootstrap基础
 jQuery基础4（文档处理）
jQuery楼层效果
 jQuery清除、停止队列中剩下（未执行的函数）

原文地址：https://www.cnblogs.com/sishiuliunian/p/4896028.html