JavaScript 学习 12.2

最新推荐文章于 2022-05-04 07:54:45 发布

waylonZXH

最新推荐文章于 2022-05-04 07:54:45 发布

阅读量206

点赞数 1

分类专栏：学习文章标签： JavaScript

本文链接：https://blog.csdn.net/waylonZXH/article/details/84724970

版权

学习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

无缝滚动框

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>gundong</title>
    <style>
    * {margin: 0;padding: 0;}
    #div1 {width: 400px;height: 200px; margin: 100px auto;overflow: hidden ;background: #ccc;position: relative;}
    #div1 ul {position: absolute;left: 0;top: 0;} 
    #div1 ul li { float: left; width: 100px;height: 200px;list-style: none;}
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');
            var speed = 1;
            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
            oUl.style.width=aLi[0].offsetWidth*aLi.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 timer=setInterval(move,10);
            oDiv.onmousemove=function(){
                clearInterval(timer); 
            };
            oDiv.onmouseout=function(){
                timer=setInterval(move,10);
            };
            document.getElementsByTagName('a')[0].onclick=function() {
                speed=-1;
            };
            document.getElementsByTagName('a')[1].onclick=function() {
                speed=1;
            };

            };
            
    </script>
</head>
<body>
    <a href="javascript:;">向左走</a>
    <a href="javascript:;">向右走</a>
    <div id="div1">
        <ul >
            <li><img src="pic/1.jpg" alt=""></li>
            <li><img src="pic/2.jpg" alt=""></li>
            <li><img src="pic/3.jpg" alt=""></li>
            <li><img src="pic/4.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>