Javascript图片无缝滚动_妙味课堂

本是古典何须时尚 2022-07-14 11:18 162阅读 0赞

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                position: relative;
                width: 680px;
                height: 132px;
                margin:10px auto;
                border: 1px solid black;
                overflow: hidden;
            }
            #div1 ul{
                position: absolute;
                left:0px;
            }
            #div1 ul li{
                list-style: none;
                float:left;
                width:150px;
                height:112px;
                padding: 10px;
            }
            #div1 ul li img{
                width: 150px;
                height: 112px;
            }
    
        </style>
        <script>
            window.onload=function () {
                var oDiv=document.getElementById('div1');
                var oUl=oDiv.getElementsByTagName('ul')[0];
                var aLi=oUl.getElementsByTagName('li');
                var aA=document.getElementsByTagName('a');
    
                var timer=null;
                var iSpeed=3;
                oUl.innerHTML+=oUl.innerHTML;
                oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
                function fnMove() {
                    if(oUl.offsetLeft<-oUl.offsetWidth/2) {
                        oUl.style.left = 0;
                    }
                    else if(oUl.offsetLeft>0){
                        oUl.style.left=-oUl.offsetWidth/2+'px';
                        //视频中此处没有'px'单位，但是在视频中能运行
                    }
    
                    oUl.style.left=oUl.offsetLeft+iSpeed+'px';
                };
                timer=setInterval(fnMove,30);
                aA[0].onclick=function () {
                    iSpeed=-10;
                };
                aA[1].onclick=function () {
                    iSpeed=10;
                };
                oDiv.onmouseover=function () {
                    clearInterval(timer);
                };
                oDiv.onmouseout=function(){
                    timer=setInterval(fnMove,30);
                }
            }
        </script>
    </head>
    <body>
    <a href="javascript:;"><---</a>
    <a href="javascript:;">---></a>
    <div id="div1">
        <ul>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
            <li><img src="4.jpg" alt=""></li>
        </ul>
    </div>
    </body>
    </html>