简单的slideShow(jQuery实现)



    
        TODO supply a title
        
        
        
        
        
    
    
        
        
  • slideshow_large
  • slideshow_large
  • slideshow_large
  • slideshow_large

// 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;
}

图片什么的,请自备


你可能感兴趣的:(javascript,html,jQuery)