图片无限重复滚动

最新推荐文章于 2021-06-18 20:42:10 发布

Heart_is_clean

最新推荐文章于 2021-06-18 20:42:10 发布

阅读量295

点赞数

文章标签：循环重复滚动

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 640px;
            height: 120px;
            margin: 100px auto;
            background-color: #646464;
            position: relative;
            overflow: hidden;
        }
        #div1 ul{
            position:absolute;
            left:0;
            top:0;
            overflow: hidden;
            background-color: #3b7796;
        }

        #div1 ul li{
            float: left;
            width: 160px;
            height: 120px;
            list-style: none;
        }
    </style>

    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var oUl = document.getElementById('ul1');
            var speed = 2;//初始化速度

            oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2）
            var oLi= document.getElementsByTagName('li');
            oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下

            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');


            function move(){
                if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
                    oUl.style.left = 0;
                }

                if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时
                    oUl.style.left = -(oUl.offsetWidth/2)+'px';
                }

                oUl.style.left = oUl.offsetLeft + speed + 'px';
            }

            oBtn1.addEventListener('click',function(){
                speed = -2;
            },false);
            oBtn2.addEventListener('click',function(){
                speed = 2;
            },false);

            var timer = setInterval(move,30);//全局变量 ，保存返回的定时器

//            oDiv.addEventListener('mouseout', function () {
//                timer = setInterval(move,30);
//            },false);
//            oDiv.addEventListener('mousemove', function () {
//                clearInterval(timer);//鼠标移入清除定时器
//            },false);
        }
    </script>
</head>
<body>
<input id="btn1" type="button" value="向左">
<input id="btn2" type="button" value="向右">
<div id="div1">

    <ul id="ul1">
        <li style="background-color: darkblue"><img src="images/monkey_run_1.png"></li>
        <li style="background-color: darkcyan"><img src="images/monkey_run_1.png"></li>
        <li style="background-color: darkgoldenrod"><img src="images/monkey_run_1.png"></li>
        <li style="background-color: darkgray"><img src="images/monkey_run_1.png"></li>
    </ul>
</div>
</body>
</html>

Heart_is_clean

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片无限重复滚动

html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; } #div1{ width: 640px;
复制链接

扫一扫