1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

(function($) {
 
    $.fn.mySlider   = function(vars) {
 
        var timeOut     = vars.timeOut || 4000;
        var capOpacity  = vars.captionOpacity || .7;
        var element     = this;
        var fxDuration  = timeOut/6;
 
        var items       = $("#" + element[0].id + " li");
        var captions    = $("#" + element[0].id + " li div");
 
        items.css('display','none');
 
        captions.css({
            'opacity': capOpacity,
            'display': 'none'
        });
 
 
        var fadeIn      = function(no) {
            $(items[no]).fadeIn(fxDuration, function() {
                $(captions[no]).fadeIn(fxDuration, function() {
                    setTimeout(function() {fadeOut(no);}, timeOut);
                });
            });
        }
 
        var fadeOut     = function(no) {
            $(captions[no]).fadeOut(fxDuration, function() {
                $(items[no]).fadeOut(fxDuration, function() {
                    fadeIn(calcNext(no));
                });
            });
        }
 
        var calcNext    = function(no) {
            return ((no + 1) == items.length) ? 0 : (no + 1);
        }
 
        fadeIn(0);
 
 
    }
 
 
})(jQuery);

(function($) { $.fn.mySlider = function(vars) { var timeOut = vars.timeOut || 4000; var capOpacity = vars.captionOpacity || .7; var element = this; var fxDuration = timeOut/6; var items = $("#" + element[0].id + " li"); var captions = $("#" + element[0].id + " li div"); items.css('display','none'); captions.css({ 'opacity': capOpacity, 'display': 'none' }); var fadeIn = function(no) { $(items[no]).fadeIn(fxDuration, function() { $(captions[no]).fadeIn(fxDuration, function() { setTimeout(function() {fadeOut(no);}, timeOut); }); }); } var fadeOut = function(no) { $(captions[no]).fadeOut(fxDuration, function() { $(items[no]).fadeOut(fxDuration, function() { fadeIn(calcNext(no)); }); }); } var calcNext = function(no) { return ((no + 1) == items.length) ? 0 : (no + 1); } fadeIn(0); } })(jQuery);

 $(document).ready(function() {
        $("#slider").mySlider({
            timeOut: 4000,
            captionOpacity: .7            
        });
    });

$(document).ready(function() { $("#slider").mySlider({ timeOut: 4000, captionOpacity: .7 }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

    <ul id="slider">
        <li style="display: none;">
            <img src="image1.jpg" alt="">
            <div style="opacity: 0.7; display: none;" class="top">
                Some nice text captions..
            </div>
        </li>
        <li style="display: none;">
            <img src="image2.jpg" alt="">
            <div style="opacity: 0.7; display: none;" class="bottom">
                Some nice text captions..
            </div>
        </li>
        <li style="display: none;">
            <img src="image3.jpg" alt="">
            <div style="opacity: 0.7; display: none;" class="top">
                Some nice text captions..
            </div>
        </li>
        <li style="display: none;">
            <img src="image4.jpg" alt="">
            <div style="opacity: 0.7; display: none;" class="bottom">
                Some nice text captions..
            </div>
        </li>
        <li style="opacity: 0.00000555164;">
            <img src="image5.jpg" alt="">
            <div style="opacity: 0.7; display: none;" class="top">
                Some nice text captions..
            </div>
        </li>
    </ul>

<ul id="slider"> <li style="display: none;"> <img src="image1.jpg" alt=""> <div style="opacity: 0.7; display: none;" class="top"> Some nice text captions.. </div> </li> <li style="display: none;"> <img src="image2.jpg" alt=""> <div style="opacity: 0.7; display: none;" class="bottom"> Some nice text captions.. </div> </li> <li style="display: none;"> <img src="image3.jpg" alt=""> <div style="opacity: 0.7; display: none;" class="top"> Some nice text captions.. </div> </li> <li style="display: none;"> <img src="image4.jpg" alt=""> <div style="opacity: 0.7; display: none;" class="bottom"> Some nice text captions.. </div> </li> <li style="opacity: 0.00000555164;"> <img src="image5.jpg" alt=""> <div style="opacity: 0.7; display: none;" class="top"> Some nice text captions.. </div> </li> </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

ul#slider {
    width: 363px;
    height: 198px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
ul#slider li {
    float: left;
    position: relative;
    /*display: none;*/
}
 
ul#slider li div {
    position: absolute;
    width: 343px;
    background-color: #000;
    color: #fff;
    left: 0;
    /*display: none;*/
    padding: 10px;
}
 
.top {
    top: 0;
}
 
.bottom {
    bottom: 0;
}

ul#slider { width: 363px; height: 198px; list-style-type: none; margin: 0; padding: 0; overflow: hidden; } ul#slider li { float: left; position: relative; /*display: none;*/ } ul#slider li div { position: absolute; width: 343px; background-color: #000; color: #fff; left: 0; /*display: none;*/ padding: 10px; } .top { top: 0; } .bottom { bottom: 0; }