javascript设置无缝滚动图片

最新推荐文章于 2022-02-18 19:52:16 发布

又宠又烦的Android女

最新推荐文章于 2022-02-18 19:52:16 发布

阅读量784

点赞数

分类专栏： javascript 前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_37678565/article/details/73849490

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

本文能够实现无缝滚动图片，并且能够控制左右滚动，初学javaScript，若觉得有什么不妥的地方欢迎留言。

<!DPCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1 {width:712px; height:108px; margin:100px auto; position:
relative; background:red; overflow:hidden;}
#div1 ul {position:absolute; left:0; top:0}
#div1 ul li {float:left;width:178px; height:108px; list-style:none}
</style>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        var oUl = oDiv.getElementsByTagName('ul')[0];
        var oLi = oUl.getElementsByTagName('li');
        
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = oLi[0].offsetWidth*oLi.length;
        var speed = -2;
        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,30);
        
        oDiv.onmouseover = function(){
            clearInterval(timer);
        }
        
        oDiv.onmouseout = function(){
            timer = setInterval(move,30);
        }
        
        document.getElementsByTagName('a')[0].onclick = function(){
            speed = -2;
        }
        
        document.getElementsByTagName('a')[1].onclick = function(){
            speed = 2;
        }
    }
</script>
</head>
<body>
<a>向左</a>
<a>向右</a>
<div id="div1">
    <ul>
        <li><img src="img/1.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
    <ul>
</div>
</body>

<html>