利用jQuery实现一个幻灯片演示效果

By Rainbow on // jQuery // 3651 Views+ // (0) Comments

利用jQuery实现一个幻灯片演示效果,但是这个jQuery Slide Show效果的jQuery代码，写的很优雅，思路也很清晰。

mySlider.js 插件

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);

初始化mySlider

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

Html Code

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>

Css Code

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

下载：http;//blog.moocss.com/jQuery/demo22/

演示：http;//blog.moocss.com/jQuery/demo22/slider.html

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计