演示:QQ录屏20231128212554.mov
联想截图_20231128212900.png
1.jpg
2.jpg
3.jpg
4.jpg
6.jpg
th.jpg

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #lunbo{
            position:relative;
            margin: 100px auto;
            width: 500px;
            height: 150px;
            overflow: hidden;
            }
            #lunbo ul{
                position: absolute;
                left: 0;
                top: 0;
                }
                #lunbo li{
                    float: left;
                    height: 150px;
                    width: 200px;
                    list-style: none;
                    }
                    #lunbo li img{
                        width:200px;
                        height: 150px;
                        }
</style>
</head>
<body>

!!!

!!!

            <script type="text/javascript">
                window.onload=function(){
                    var oDiv=document.getElementById("lunbo")
                    var oUl=document.getElementsByTagName('ul')[0]
                    var oLi=document.getElementsByTagName('li')
                    var timer=null
                    oUl.innerHTML+=oUl.innerHTML
                    oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'
                    //oul.innerHTML=oUl, innerHTML+oUl.innerHTML,与前面oUl.innerHTNL +=oUL.innerHTML一样
                    timer=setInterval(function(){
                        if(oUl.offsetLeft<-oUl.offsetwidth/2){//判断2个ul长度,如果到一半了,就Left归e
                        oUl.style.left='0'}
                        oUl.style.left=oUl.offsetLeft-2+'pX'//定时器改变uL的Left值。每次uL的eft都-2pX
                        },30)
                        //鼠标移入,停止移动
                        oDiv.onmousemove=function(){
                            clearInterval(timer)
                            }
                            //鼠标移出,继续移动
                            oDiv.onmouseout=function(){
                                timer=setInterval(function(){
                                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                                    oUl.style.left='0'}
                                    oUl.style.left=oUl.offsetLeft-2+'px'
                                    }, 30)
                                    }
            }
    </script>                    
</body>