js实现图片自动切换效果

最新推荐文章于 2021-09-17 18:06:21 发布

yuzhongkai

最新推荐文章于 2021-09-17 18:06:21 发布

阅读量2k

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/yuzhongkai/article/details/50998418

版权

Js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

var moves;
        $(function() {
            var imgs = $("#imgs li");
            //取的里标签的个数
            var currentIndex = imgs.length;

            moves = function () {
                var img = $(sh(getCurrentIndex()));
                //alert(currentIndex);
                //$(sh(currentIndex-1<0?imgs.length-1:currentIndex-1)).css({zIndex:-1});
                img.animate({left: "-=100%"}, 1000, function () {
                    img.css({left: 0, zIndex: -2});
                    window.setTimeout("moves()", 3000);
                });
            };
            moves();
            //返回img的位置3,2,1
            function getCurrentIndex() {
                if (currentIndex < 1) {
                    currentIndex = imgs.length;
                }
                return --currentIndex;
            }

            function sh(index) {
                //imgs是定义取的数据
                $.each(imgs, function (i, img) {
                    if (i != index) {
                    document.title = i+"="+index;
                        $(img).css({
                            "z-index": -2
                        });
                    }
                });
                $(imgs[index - 1 < 0 ? imgs.length - 1 : index - 1]).css({
                    "z-index": -1
                })
                return $(imgs[index]).css({
                    "z-index": -0
                });
            }
            });
    </script>
    <style>
        *{margin:0px; padding:0px;}
        a{text-decoration:none;}
        ul{list-style:none;}
        img{ border:0;}
        #neck{position:relative; text-align:center;background:#efefef;z-index:-1;height:750px; }
        #imgs li{position:absolute;top:0px; left:0px;width:100%;}

    </style>
</head>
<body>
<div id="neck">
    <ul id="imgs">
        <li><a href="#"><img src="bootstrap/1.jpg" /></a></li>
        <li><a href="#"><img src="bootstrap/2.jpg" /></a></li>
        <li><a href="#"><img src="bootstrap/3.jpg"/></a></li>
    </ul>
    <div style="clear:both;"></div>
</div>

</div>
</body>