正文

jquery图片轮播，单张图片轮播时间不同

IP云
IP云V管理员/7 阅读
06/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .active
        {
            color: Red;
        }
    </style>
    <script src="JS/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="divOne">
        <ul id="banner">
            <li>
                <img src='http://future.iptid.com/Files/News/52714d00-5a01-4c5a-9a47-41d2ec9d4ca2.jpg' /></li>
            <li style="display: none">
                <img src='http://future.iptid.com/Files/News/a2f39039-d17f-4085-8d99-8c214a474f34.jpg' /></li>
            <li style="display: none">
                <img src='http://future.iptid.com/Files/News/1fd79e78-616f-4fbf-b35f-94703a1017ee.jpg' /></li>
            <li style="display: none">
                <img src='http://future.iptid.com/Files/News/9317e802-7cdb-4acb-823a-49bd9d8e5923.jpg' /></li>
        </ul>
        <div id="dot">
            <ul>
                <li class="active">1 </li>
                <li>2 </li>
                <li>3 </li>
                <li>4 </li>
            </ul>
        </div>
    </div>
    <div id="txtTimer">
    </div>
    <script type="text/javascript">
        var arr = new Array("6000", "8000", "9000", "9000");
                var bannerlength = 0;
                var i = 0;
                var _timer = 0;
                var _stepping = 1000;
                var bannerTimer = null;
                function turnChange() {
                    if (_timer < arr[i]) {
                        _timer += _stepping;
                    }
                    else {
                        _timer = 0;
                        ++i;
                        if (i > bannerlength) {
                            i = 0;
                        }
                        $("#banner li").eq(i).show().siblings().hide();
                        $("#dot li").eq(i).addClass("active").siblings().removeClass("active");
                    }
                    $("#txtTimer").text(_timer);
                };                $(function () {
                    bannerlength = $("#banner li").length;
                    bannerTimer=setInterval(turnChange, _stepping);
                });
                $(function () {
                    $("#dot li").click(function () {
                        clearInterval(bannerTimer);
                        i = $(this).index();
                        _timer = 0;
                        $("#banner li").eq(i).show().siblings().hide();
                        $("#dot li").eq(i).addClass("active").siblings().removeClass("active");
                        bannerTimer=setInterval(turnChange, _stepping);
                    });
                });       // setTimeout("show()", arr[i]);//        function show() {
//            ++i;
//            $("#banner li").eq(i).show().siblings().hide();
//            $("#dot li").eq(i).addClass("active").siblings().removeClass("active");
//            setTimeout("show()", arr[i]);
//        }
//        $(function () {
//            $("#dot li").click(function () {//                i = $(this).index() - 1;
//                setTimeout("show()", arr[i]);
//            });
//        });
    </script>
</body>
</html>