JavaScript 图片无缝滚动

最新推荐文章于 2021-07-15 10:21:02 发布

木易一

最新推荐文章于 2021-07-15 10:21:02 发布

阅读量206

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43684713/article/details/88424910

版权

JavaScript 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

图片无缝滚动案例

效果图

ps:允许上传图片大小有限制，只能录一点点......

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #C,#D{
            width: 3200px;
            height: 200px;
            float: left;
        }
        #C>img,#D>img{
            width: 400px;
            height: 200px;
            float: left;
        }
        #A{
            margin: 0 auto;
            width: 1200px;
            height: 200px;
            overflow: hidden;
        }
        #B{
            width: 6400px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="A">
    <div id="B">
        <div id="C">
            <img src="img/1.jpg" alt="图片无法显示">
            <img src="img/2.jpg" alt="图片无法显示">
            <img src="img/3.jpg" alt="图片无法显示">
            <img src="img/4.jpg" alt="图片无法显示">
            <img src="img/5.jpg" alt="图片无法显示">
            <img src="img/6.jpg" alt="图片无法显示">
            <img src="img/7.jpg" alt="图片无法显示">
            <img src="img/8.jpg" alt="图片无法显示">
        </div>
        <div id="D"></div>
    </div>
</div>
<script>
    var A=document.getElementById("A");
    var D=document.getElementById("D");
    var C=document.getElementById("C");
    D.innerHTML= C.innerHTML;
    var speed=1;
    var time;
    showImg();
    function showImg(){
        time=setInterval(function(){
            if(A.scrollLeft==3200){
                A.scrollLeft=0;
            }
            var scroll= A.scrollLeft;
            scroll+=speed;
            A.scrollLeft=scroll;
        },1)
    }
    A.onmouseenter=function(){
        clearInterval(time);
    };
    A.onmouseleave=function(){
        showImg()
    }
</script>
</body>
</html>