简单的slideShow(jQuery实现)

最新推荐文章于 2021-07-05 17:47:53 发布

johnny_Nicolas

最新推荐文章于 2021-07-05 17:47:53 发布

阅读量751

点赞数 1

本文链接：https://blog.csdn.net/johnny_Nicolas/article/details/51447433

版权

html 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
        <script src="js/js2.js" type="text/javascript" ></script>
        <link href = "css/style2.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <script type="text/javascript">
        $(function() {
            $("#slideShow").slideShow($("#slideShow"));
        });
        </script>
        <div id="container">
            <ul class="slideShow" id="slideShow">
                <li><img src="images/slideshow_large_1.jpg" alt="slideshow_large"/></li>
                <li><img src="images/slideshow_large_2.jpg" alt="slideshow_large"/></li>
                <li><img src="images/slideshow_large_3.jpg" alt="slideshow_large"/></li>
                <li><img src="images/slideshow_large_4.jpg" alt="slideshow_large"/></li>
            </ul>
        </div>
    </body>
</html>

// Copyright 2010 htmldrive.net Inc.

(function($){
    $.fn.slideShow = function (slideShowElement) {
        
        var li = slideShowElement.children("li");
        var liNumber = li.length;
        var index = 0;
        init(li);
        setTimeout((function(li, index) {
                return function() {
                   play(li, index); 
                };
            })(li ,index),4000);
        function play(li, index) {
            li.eq(index).fadeToggle(1500,'linear',(function(li,index) {
                return function() {
                    if (index === liNumber - 1) {
                        index = -1;
                    }
                    li.eq(index+1).fadeToggle(1500,'linear');
                };
            })(li,index));
            if (index === liNumber - 1) {
                        index = -1;
            }
            index++;
            setTimeout((function(li, index) {
                return function() {
                   play(li, index); 
                };
            })(li ,index),4000);
        }
        
        function init(li) {
            for (var i = 1; i < liNumber; i++) {
                li.eq(i).fadeToggle('fase');
            }
        }
    };
})(jQuery);

* {
    margin:0;
    padding:0;
    list-style-type:none;
}

#container {
    height: 500px;
    width: 700px;
    margin: auto;
    border: 1px;
    overflow:hidden;
}

ul.slideShow {
    float: left;
    position: relative;
    width: 100%;
    top: 0px;
}

ul.slideShow li img {
    height: 500px;
    width: 700px;
}