轮播制作

标签：

轮播是在各大网页首页经常能看到的效果，以下我给大家分享我是如何利用JS制作轮播的。

首先设置一个和图片一样宽高的DIV作为轮播显示窗口，然后加入要轮播的图片，代码如下：

<div class="div1" style="position: relative">
<div id="Div" style="position: absolute">
<img  class="img1" src="1.webp" alt=""/>
<img class="img2" src="2.jpg" alt=""/>
<img  class="img3" src="3.webp" alt=""/>
</div>

然后，利用setTimeout（）属性，通过改变图片距离DIV的left值来实现，轮播效果的，注意，一定要给DIV设置Overflow:hidden，并使图片浮动以让它们成水平排列，代码如下：

<script type="text/javascript">

    window.onload=function(){
        timers();
    };
    var a=1180;
    var timer;
    function timers(){
        a=a-1180;
        document.getElementById("Div").style.left=a+"px";
        if(a==-2360){
            a=1180;
        }
        timer=setTimeout("timers()",2000)
    }

轮播制作

标签：

原文地址：http://www.cnblogs.com/qiutaotao/p/5496120.html