JS轮播代码

最新推荐文章于 2024-04-27 09:07:55 发布

black__zzc

最新推荐文章于 2024-04-27 09:07:55 发布

阅读量604

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/black__zzc/article/details/51010656

本文介绍了两种使用HTML和JavaScript实现图片广告轮播效果的方法。第一种方法通过切换两张图片的位置来达到轮播效果；第二种方法则利用多张图片连续移动实现无缝轮播。两种方法均采用定时器控制图片切换的时间间隔。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 770px;
            height: 300px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        div img{position: absolute;}
        #img1{left: 0;}
    </style>
</head>

<body>

法一：

法二：

<input type="button" value="图片广告轮播效果" onclick="setTimeout(imgmove, 2000)"/>
<br/><br/>
<div>
    <img id="img7" src="images/ad7.jpg" alt=""/>
    <img id="img6" src="images/ad6.jpg" alt=""/>
    <img id="img5" src="images/ad5.jpg" alt=""/>
    <img id="img4" src="images/ad4.jpg" alt=""/>
    <img id="img3" src="images/ad3.jpg" alt=""/>
    <img id="img2" src="images/ad2.jpg" alt=""/>
    <img id="img1" src="images/ad1.jpg" alt=""/>
</div>
<script>
    function imgmove(){
        var img1=document.getElementById("img1");
        var img2=document.getElementById("img2");
        var img3=document.getElementById("img3");
        var img4=document.getElementById("img4");
        var img5=document.getElementById("img5");
        var img6=document.getElementById("img6");
        var img7=document.getElementById("img7");

        if(!img1.style.left) img1.style.left=0;
        if(!img2.style.left) img2.style.left="-770px";
        if(!img3.style.left) img3.style.left="-1540px";
        if(!img4.style.left) img4.style.left="-2310px";
        if(!img5.style.left) img5.style.left="-3080px";
        if(!img6.style.left) img6.style.left="-3850px";
        if(!img7.style.left) img7.style.left="-4620px";

        img1.style.left=parseInt(img1.style.left)+2+"px";
        img2.style.left=parseInt(img2.style.left)+2+"px";
        img3.style.left=parseInt(img3.style.left)+2+"px";
        img4.style.left=parseInt(img4.style.left)+2+"px";
        img5.style.left=parseInt(img5.style.left)+2+"px";
        img6.style.left=parseInt(img6.style.left)+2+"px";
        img7.style.left=parseInt(img7.style.left)+2+"px";

        if(parseInt(img1.style.left)==770) img1.style.left="-4620px";
        if(parseInt(img2.style.left)==770) img2.style.left="-4620px";
        if(parseInt(img3.style.left)==770) img3.style.left="-4620px";
        if(parseInt(img4.style.left)==770) img4.style.left="-4620px";
        if(parseInt(img5.style.left)==770) img5.style.left="-4620px";
        if(parseInt(img6.style.left)==770) img6.style.left="-4620px";
        if(parseInt(img7.style.left)==770) img7.style.left="-4620px";

        if(parseInt(img1.style.left)==0 || parseInt(img2.style.left)==0 || parseInt(img3.style.left)==0
                || parseInt(img4.style.left)==0 || parseInt(img5.style.left)==0 || parseInt(img6.style.left)==0
                || parseInt(img7.style.left)==0)
            setTimeout(imgmove, 2000);
        else
            setTimeout(imgmove, 1);
    }
</script>
</body>
</html>