JS轮播代码

来源：互联网发布：c语言怎么倒序输出编辑：程序博客网时间：2024/05/14 01:54

<!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>

0 0