利用setTimeout && setInterval实现图片轮播

作者原创，转载请注明来源 :-)

setTimeout(a,b);

在b/1000秒后执行a函数（只执行一次）

var c = setInterval(a,b);

每b/1000秒执行一次a函数，知道遇到
clearInterval（c）;结束

两者逻辑并用实现图片轮播：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.img_main{
    width:430px;
    height:250px;
    overflow:hidden;
}

.img, td{
    border:none;
    padding:0;
    margin:0;
}

.imgs td{
    width:430px;
    height:250px;
}
.imgs img{
    width:430px;
    height:250px;
}
</style>
</head>
<body>
    <div id=main class=img_main>
        <table id=imgs class=imgs  border="0" align="center" cellpadding="0" cellspacing="0" >
            <tr>
                <td><img src="res/ind001.jpg"></td>
                <td><img src="res/ind002.jpg"></td>
                <td><img src="res/ind003.jpg"></td>
                <td><img src="res/ind004.jpg"></td>
                <td><img src="res/ind005.jpg"></td>
                <td><img src="res/ind001.jpg"></td>
            </tr>
        </table>
    </div>
    <span id=tx></span>
<script type="text/javascript">
    var a = document.getElementById("main");
    var b = document.getElementById("imgs");
    var len = b.offsetWidth;
    var tx = document.getElementById("tx");
    var i = 0;
    var x = 10;

    function dos(){
        if(len - a.scrollLeft <=430){
            i = 0;
            a.scrollLeft -=len;
        } else {
            a.scrollLeft +=x;
        }
        tx.innerText = "left:"+a.scrollLeft+",len:"+len+",lens:"+b.offsetWidth+",减法:"+(len - a.scrollLeft);
        i ++;

        if(a.scrollLeft % 430 == 0){
            i = 0;
            clearInterval(run);
            setTimeout(sd,3000);
        }
    }

    function sd(){
        run = setInterval(dos,30);
    }

    var run = setInterval(dos,30);
</script>
</body>
</html>

利用setTimeout && setInterval实现图片轮播

猜你喜欢