js多张图片的无缝滚动

最新推荐文章于 2024-04-23 11:28:13 发布

莓莓儿～

最新推荐文章于 2024-04-23 11:28:13 发布

阅读量1.8k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/fanfan_h/article/details/91136788

版权

JS 专栏收录该内容

49 篇文章 9 订阅

订阅专栏

分析：
1：存在两组图片用float：left向左浮动，给父元素设置一个小块，可以展示量三张图片就可以。
2：动态获取图片
3：给父元素的滚动条进行循环滚动，
setInterval(function(){
dong.scrollLeft -=2;
if(dong.scrollLeft<=0){
dong.scrollLeft=1250;
}
},30);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轮播1</title>
    <style>
        .Dong {
            width:600px;
            height:150px;
            border:1px solid black;
            box-sizing: border-box;
            margin:auto;
            overflow-y: hidden;
            overflow-x: hidden;

        }
        .kuang {
            width:2500px;
            height:150px;
        }
       .part1,.part2 {
            width:1250px;
            height:150px;
           float:left;
        }
        .part1>img,.part2>img{
            width:250px;
           height:150px;
           float:left;
        }
    </style>
</head>
<body>
<div class="Dong">
    <div class="kuang">
        <div class="part1">
            <img src="./img/4.jpg" alt=""/>
            <img src="./img/2.jpg" alt=""/>
            <img src="./img/5.jpg" alt=""/>
            <img src="./img/8.jpg" alt=""/>
            <img src="./img/6.jpg" alt=""/>
        </div>
        <div class="part2"></div>
    </div>
</div>
<script>
     var dong =document.querySelector (".Dong");
     var part1=document.querySelector (".part1");
     var part2=document.querySelector (".part2");
     part2.innerHTML =part1.innerHTML ;

     setInterval(function(){
      dong.scrollLeft -=2;
         if(dong.scrollLeft<=0){
            dong.scrollLeft=1250;
         }
     },30); 
</script>
</body>
</html>

在这里插入图片描述

莓莓儿～

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
js多张图片的无缝滚动

分析：1：存在两组图片用float：left向左浮动，给父元素设置一个小块，可以展示量三张图片就可以。2：动态获取图片3：给父元素的滚动条进行循环滚动，setInterval(function(){dong.scrollLeft -=2;if(dong.scrollLeft<=0){dong.scrollLeft=1250;}},30);<!DOCTYPE html...
复制链接

扫一扫