jQuery图片轮播(焦点图)插件(转载）

本文转自http://www.oschina.net/code/snippet_206691_11515?p=3#comments

特点：兼容IE6+，Chrome，Firefox，Opera，safari，可左右，可上下，可快可慢，可指定默认显示第N张，自由设定，代码简洁，运行效率高，用户体验良好:) ！！感谢各位朋友的热心反馈！！ ＝update log＝＝2015.01.23 新增：播放顺序为12341234 修复：频繁悬停后，滚动错乱 ＝update log＝＝2014.04.30 新增：按键鼠标经过阻止事件冒泡 修复：频繁悬停后，滚动错乱 ＝update log＝＝2013.03.14 新增：可手动设置尺寸，若未设置，自动采用第一张图片尺寸 修复：鼠标经过再离开时，增加一个延时时长，再循环到下一张 ＝update log＝＝2012.08.09 新增：底栏可设置隐藏 修复：滚动方式由原来的1-2-3-4-1-2-3-4... 修改为 1-2-3-4-3-2-1...，滚动效果更平滑 ＝update log＝＝2012.07.05 修复：设置各LI元素为第一张图片的尺寸，防止后续若有小图导致整体位置错乱 ＝update log＝＝2012.06.30 修复：IE下显示边框，滚动重叠问题 新增：点选按键隐藏设置，默认2秒后隐藏，按键样式，可圆可方（IE8-只方不圆） 演示地址：http://ishere.cn/demo/jquery.slideBox/

 

1. [图片] 方形按键，显示    

2. [图片] 按键自动隐藏    

3. [图片] 圆形按键    

4. [图片] 隐藏底栏    

5. [代码]jquery.slideBox.css     

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@charset "utf-8";
html, body { font-family:"微软雅黑"}
/*
 * jQuery图片轮播(焦点图)插件
 * ADD.JENA.201206291027
 * EDIT.JENA.201206300904
 * Author: jena
 * Demo: http://ishere.cn/demo/jquery.slidebox/
 */
div.slideBox{ position:relative; width:670px; height:300px; overflow:hidden;}
div.slideBox ul.items{ position:absolute; float:left; background:none; list-style:none; padding:0px; margin:0px;}
div.slideBox ul.items li{ float:left; background:none; list-style:none; padding:0px; margin:0px;}
div.slideBox ul.items li a{ float:left; line-height:normal !important; padding:0px !important; border:none/*For IE.ADD.JENA.201206300844*/;}
div.slideBox ul.items li a img{ margin:0px !important; padding:0px !important; display:block; border:none/*For IE.ADD.JENA.201206300844*/;}
div.slideBox div.tips{ position:absolute; bottom:0px; width:100%; height:50px; background-color:#000; overflow:hidden;}
div.slideBox div.tips div.title{ position:absolute; left:0px; top:0px; height:100%;}
div.slideBox div.tips div.title a{ color:#FFF; font-size:18px; line-height:50px; margin-left:10px; text-decoration:none;}
div.slideBox div.tips div.title a:hover{ text-decoration:underline !important;}
div.slideBox div.tips div.nums{ position:absolute; right:0px; top:0px; height:100%;}
div.slideBox div.tips div.nums a{ display:inline-block; >float:left/*For IE.ADD.JENA.201206300844*/; width:20px; height:20px; background-color:#FFF; text-indent:-99999px; margin:15px 10px 0px 0px;}
div.slideBox div.tips div.nums a.active{ background-color:#093;}

6. [代码]jquery.slideBox.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/*
 * jQuery图片轮播(焦点图)插件
 * ADD.JENA.201206291027
 * EDIT.JENA.201206300904
 * EDIT.JENA.201207051027
 * EDIT.JENA.201208090849
 * EDIT.JENA.201501231440
 * Version: 2.2.1440
 * Author: jena
 * Demo: http://ishere.cn/demo/jquery.slidebox/
 */
(function($) {
    $.fn.slideBox = function(options) {
        //默认参数
        var defaults = {
            direction : 'left',//left,top
            duration : 0.6,//unit:seconds
            easing : 'swing',//swing,linear
            delay : 3,//unit:seconds
            startIndex : 0,
            hideClickBar : true,
            clickBarRadius : 5,//unit:px
            hideBottomBar : false
        };
        var settings = $.extend(defaults, options || {});
        //计算相关数据
        var wrapper = $(this), ul = wrapper.children('ul.items'), lis = ul.find('li'), firstPic = lis.first().find('img');
        var li_num = lis.size(), li_height = 0, li_width = 0;
        //初始化
        var init = function(){
            if(!wrapper.size()) return false;
            wrapper.data('over', 0);
             
            li_height = lis.first().height();
            li_width = lis.first().width();
             
            wrapper.css({width: li_width+'px', height:li_height+'px'});
            lis.css({width: li_width+'px', height:li_height+'px'});//ADD.JENA.201207051027
             
            ul.append(ul.find('li:first').clone());
            li_num += 1;
             
            if (settings.direction == 'left') {
                ul.css('width', li_num * li_width + 'px');
            } else {
                ul.css('height', li_num * li_height + 'px');
            }          
            ul.find('li:eq('+settings.startIndex+')').addClass('active');
             
            if(!settings.hideBottomBar){//ADD.JENA.201208090859
                var tips = $('<div class="tips"></div>').css('opacity', 0.6).appendTo(wrapper);
                var title = $('<div class="title"></div>').html(function(){
                    var active = ul.find('li.active').find('a'), text = active.attr('title'), href = active.attr('href');
                    return $('<a>').attr('href', href).text(text);
                }).appendTo(tips);
                var nums = $('<div class="nums"></div>').hide().appendTo(tips);
                lis.each(function(i, n) {
                    var a = $(n).find('a'), text = a.attr('title'), href = a.attr('href'), css = '';
                    i == settings.startIndex && (css = 'active');
                    $('<a>').attr('href', href).text(text).addClass(css).css('borderRadius', settings.clickBarRadius+'px').mouseover(function(){
                        wrapper.data('over', 1);
                        $(this).addClass('active').siblings().removeClass('active');
                        ul.find('li:eq('+$(this).index()+')').addClass('active').siblings().removeClass('active');
                        start();
                    }).appendTo(nums);
                });
             
                if(settings.hideClickBar){//ADD.JENA.201206300847
                    tips.hover(function(){
                        nums.animate({top: '0px'}, 'fast');
                    }, function(){
                        nums.animate({top: tips.height()+'px'}, 'fast');
                    });
                    nums.show().delay(2000).animate({top: tips.height()+'px'}, 'fast');
                }else{
                    nums.show();
                }
            }
             
            lis.size()>1 && start();
        };
        //开始轮播
        var start = function() {
            var active = ul.find('li.active'), active_a = active.find('a');
            var index = active.index();
            if(settings.direction == 'left'){
                offset = index * li_width * -1;
                param = {'left':offset + 'px' };
            }else{
                offset = index * li_height * -1;
                param = {'top':offset + 'px' };
            }
             
            wrapper.find('.nums').find('a:eq('+index+')').addClass('active').siblings().removeClass('active');
            wrapper.find('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr('title'));
 
            // EDIT.JENA.20150123
            ul.stop().animate(param, settings.duration*1000, settings.easing, function() {
                active.removeClass('active');
                if(active.next().size()==0){
                    ul.css({top:0, left:0}).find('li:eq(1)').addClass('active');
                    wrapper.find('.nums').find('a:first').addClass('active').siblings().removeClass('active');
                }else{
                    active.next().addClass('active');
                }
                wrapper.data('over')==0 && wrapper.data('timeid', window.setTimeout(start, settings.delay*1000));
            });
        };
        //停止轮播
        var stop = function() {
            window.clearTimeout(wrapper.data('timeid'));
        };
        //鼠标经过事件
        wrapper.hover(function(){
            wrapper.data('over', 1);
            stop();
        }, function(){
            wrapper.data('over', 0);
            start();
        });
        //首张图片加载完毕后执行初始化
        var imgLoader = new Image();
        imgLoader.onload = function(){
            imgLoader.onload = null;
            init();
        };
        imgLoader.src = firstPic.attr('src');
    };
})(jQuery);

7. [代码]index.html     

?
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery图片轮播(焦点图)插件</title>
<link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.slideBox.js" type="text/javascript"></script>
<script>
jQuery(function($){
    $('#demo1').slideBox();
    $('#demo2').slideBox({
        direction : 'top',//left,top#方向
        duration : 0.3,//滚动持续时间，单位：秒
        easing : 'linear',//swing,linear//滚动特效
        delay : 5,//滚动延迟时间，单位：秒
        startIndex : 1//初始焦点顺序
    });
    $('#demo3').slideBox({
        duration : 0.3,//滚动持续时间，单位：秒
        easing : 'linear',//swing,linear//滚动特效
        delay : 5,//滚动延迟时间，单位：秒
        hideClickBar : false,//不自动隐藏点选按键
        clickBarRadius : 10
    });
});
</script>
</head>
 
<body>
<h3>一、左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点第1张，点选按键自动隐藏，按键边框半径（IE8-不支持）5px（以上各项为默认设置值）</h3>
<div id="demo1" class="slideBox">
  <ul class="items">
    <li><a href="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div>
<h3>二、上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第2张，点选按键自动隐藏</h3>
<div id="demo2" class="slideBox">
  <ul class="items">
    <li><a href="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div>
<h3>三、左右轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第1张，点选按键不隐藏，按键边框半径10px（圆形）</h3>
<div id="demo3" class="slideBox">
  <ul class="items">
    <li><a href="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="go/to/your/url.html" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div>
<h4>爱我的老婆孩子！献给香港回归祖国15周年，哈哈！！</h4>
</body>
</html>

8. [文件] jquery.slideBox.zip ~ 719KB     下载(506)     

posted @ 2015-08-29 17:40  焦涛  阅读(457)  评论(0)    收藏  举报