图片轮播——无缝滚动

最新推荐文章于 2020-05-30 19:34:27 发布

Chanyelo_

最新推荐文章于 2020-05-30 19:34:27 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/qq_41985171/article/details/83067229

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div2{
            width: 1300px;
            height: 250px;
            overflow: hidden;
        }
        img{
            float: left;
            width: 500px;
            height: 250px;
        }
        #div4,#div3{
            float: left;
        }
        #div1{
            width:1000%;
        }
    </style>
</head>
<body>
<div id="div2">
    <div id="div1">
        <div id="div4">
            <img src="./image/demo1.jpg" alt=""/>
            <img src="./image/demo2.jpg" alt=""/>
            <img src="./image/demo3.jpg" alt=""/>
            <img src="./image/demo4.jpg" alt=""/>
            <img src="./image/demo5.jpg" alt=""/>
            <img src="./image/demo6.jpg" alt=""/>
        </div>
        <div id="div3"></div>
    </div>
</div>
<script>
    /*淡入淡出的*/
    var speed=2;
    window.onload=function (){
        //获取地div2
        var scd=document.getElementById("div2");
        var d4=document.getElementById("div4");
        var d3=document.getElementById("div3");
        d3.innerHTML=d4.innerHTML;
       function fun(){
           if(scd.scrollLeft<=0)
           {
               scd.scrollLeft=3000;
           }
           else{
               scd.scrollLeft-=speed;
           }
       }
        var timer=setInterval(fun,10);
    }
</script>
</body>
</html>

Chanyelo_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮播——无缝滚动

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #div2{ width: 1300
复制链接

扫一扫

图片轮播——无缝滚动

“相关推荐”对你有帮助么？