图片无缝向右滚动

最新推荐文章于 2023-11-10 12:46:32 发布

翻译最新推荐文章于 2023-11-10 12:46:32 发布 · 521 阅读

css基础专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现轮播图自动滚动效果的方法。通过设置不同图片元素的宽度并利用JavaScript控制图片的显示与滚动，实现了图片的无缝自动播放功能。该方法适用于网站设计中展示多个广告或图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
      #demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}


   </style>

</head>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="homepagePicture/botAd1.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd2.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd3.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd4.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd5.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd6.gif"  alt="1"/></a>
</div>
<div id="demo2"></div>
</div>
</div>

</body>
<script type="text/javascript">
    var speed = 10; //数字越大速度越慢
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML;
    function Marquee() {
        if (tab.scrollLeft <= 0)
            tab.scrollLeft += tab2.offsetWidth
        else {
            tab.scrollLeft--;
        }
    }
    var MyMar = setInterval(Marquee, speed);
    tab.onmouseover = function () { clearInterval(MyMar) };
    tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };

</script>
</html>