https://www.weidu.gov.cn/js/lib/imgscroll.js

1/*!
2 * 轮播图组件js
3 * author: zhuyichao
4 * 2015.10
5 * v 1.1.4
6 * 只适用于图片和切换按钮在一个dom容器内的；
7 */
8
9/*
10 * 轮播图组件
11 */
12$.fn.Xslider = function(options) {
13    var settings = {
14        // 效果  有scrollx|scrolly|fade
15        affect: 'fade',
16        // 动画速度
17        speed: 1200,
18        // 时间间隔
19        space: 2000,
20        // 自动滚动
21        auto: true,
22        // 触发事件 注意用mouseover代替hover
23        trigger: 'mouseover',
24        // 内容容器id或class
25        conbox: '.conbox',
26        // 内容标签 默认为<a>
27        ctag: '.ctag',
28        //说明文字直接父容器（固定区域，不随图片变化时使用，也可以直接写在c-tag中和图片一起变化，看具体需求）
29        titleBox: '.title-con',
30        // 切换触发器id或class
31        switcher: '.switcher',
32        // 切换器标签 默认为a 
33        stag: '.stag',
34        // 当前切换器样式名称
35        current: 'cur',
36        // 是否随机指定默认幻灯图片
37        rand: false,
38        // 容器宽度
39        boxWidth: '100%',
40        boxHeight: '100%',
41        pre_b: '#left-btn',
42
43        next_b: '#right-btn'
44    };
45
46    // settings = $.extend({}, settings, options);
47    $.extend(settings, options);
48
49    var $this = $(this),
50        index = 0,
51        last_index = 3,
52        $conbox = $this.find(settings.conbox),
53        $contents = $conbox.find(settings.ctag),
54        $switcher = $this.find(settings.switcher),
55        $stag = $switcher.find(settings.stag),
56        $titleCon = $this.find(settings.titleBox),
57        Timer;
58
59    
60
61    $this.width(settings.boxWidth);
62    $contents.width($this.width());
63    $this.width($this.width());
64    if (settings.affect == 'scrollx') {
65        
66        $contents.eq(0).clone().css('float', 'left').appendTo($conbox);
67
68        $conbox.width(($contents.length + 1) * $contents.width());
69
70        $conbox.css('position', 'relative');
71        $contents.css('float', 'left');
72    }
73
74    if (settings.affect == 'scrolly') {
75        $contents.eq(0).clone().appendTo($conbox);
76
77        $conbox.height(($contents.length + 1) * $contents.height());
78
79        $conbox.css('position', 'relative');
80        $contents.css({
81            display: 'block'
82        });
83    }
84
85    var $newContents = $conbox.find(settings.ctag);
86    if (settings.boxWidth == "100%") {
87
88        $(window).on('resize', function(event) {
89            $this.width(settings.boxWidth);
90            $newContents.width($this.width());
91            $conbox.width($newContents.length * $newContents.width());
92        });
93
94    } else {
95
96        $this.height(settings.boxHeight);
97        $contents.height(settings.boxHeight);
98        $newContents.find('img').height(settings.boxHeight);
99    }
100
101
102
103    // 渐变模式预设值
104    if (settings.affect == 'fade') {
105        $switcher.css({
106            'position': 'absolute',
107            'z-index': 10
108        });
109        $.each($contents, function(k, v) {
110            if (k === 0) {
111                $(this).css({
112                    'position': 'absolute',
113                    'z-index': 9
114                })
115            } else {
116                $(this).css({
117                    'position': 'absolute',
118                    'z-index': 1,
119                    'opacity': 0
120                });
121            }
122        });
123    }
124
125    $this.css('overflow', 'hidden');
126
127    
128
129    // 滚动轮播图模式
130    function slide(once) {
131        if (index > $contents.length) {
132            $conbox.css({
133                'left': 0,
134                'top': 0
135            })
136            index = 1;
137        }
138        if (index == $contents.length) {
139            $stag.removeClass(settings.current).eq(0).addClass(settings.current);
140            if (settings.affect == 'fade') {
141                index = 0;
142            }
143        } else {
144            $stag.removeClass(settings.current).eq(index).addClass(settings.current);
145        }
146
147        var title = $contents.eq(index).find('img').eq(0).attr('alt');
148        $titleCon.html(title);
149
150        switch (settings.affect) {
151            // 横向滚动
152            case 'scrollx':
153                if (last_index == 0 && index == ($contents.length - 1)) {
154                    $conbox.finish().css({
155                        'left': $contents.length * -$contents.width()
156                    });
157                }
158                if (index == $contents.length) {
159                    $conbox.finish().animate({
160                        left: -$contents.width() * index
161                    }, settings.speed, function() {
162                        $conbox.css({
163                            'left': 0,
164                            'top': 0
165                        });
166                    });
167                } else {
168                    $conbox.finish().animate({
169                        left: -$contents.width() * index
170                    }, settings.speed);
171
172                }
173                break;
174                // 竖着滚动
175            case 'scrolly':
176                if (last_index == 0 && index == ($contents.length - 1)) {
177                    $conbox.css({
178                        'top': $contents.length * -$contents.height()
179                    });
180                }
181                if (index == $contents.length) {
182                    $conbox.finish().animate({
183                        top: -$contents.height() * index
184                    }, settings.speed, function() {
185                        $conbox.css({
186                            'left': 0,
187                            'top': 0
188                        });
189                    });
190                } else {
191                    $conbox.finish().animate({
192                        top: -$contents.height() * index
193                    }, settings.speed);
194                }
195                break;
196                // 渐变模式
197            case 'fade':
198                $contents.eq(last_index).finish()
199                    .animate({
200                        'opacity': 0
201                    }, settings.speed / 2)
202                    .css('z-index', 1)
203                    .end().eq(index).css('z-index', 9).finish()
204                    .animate({
205                        'opacity': 1
206                    }, settings.speed / 2);
207                break;
208            case 'none':
209                $contents.hide().eq(index).show();
210                break;
211        }
212        last_index = index;
213        if (last_index == $contents.length) {
214            last_index = 0;
215        }
216        index++;
217
218        // 随机变幻；

219        if (settings.rand) {
220            index = Math.floor(Math.random() * $contents.length);
221        }
222        //判断是否只执行一次。
223        if (once) {
224            //index = last_index;
225        } else {
226            clearTimeout(Timer);
227            Timer = setTimeout(slide, settings.space);
228        }
229    };
230
231
232    // 如果设置自动，开始动作
233    if (settings.auto) {
234        Timer = setTimeout(slide, settings.space);
235    }
236
237    // 标签事件触发时立即显示当前图片
238    $stag.on(settings.trigger, function() {
239        _pause();
240        index = $(this).index();
241        if (last_index == $contents.length - 1 && index == 0) {
242            index = $contents.length;
243        }
244        slide(true);
245    });
246
247    // 悬浮时暂停，离开时继续
248    $this.mouseenter(_pause);
249    $this.mouseleave(_continue);
250    // 暂停动画动作
251    function _pause() {
252        if (Timer) {
253            clearTimeout(Timer);
254        }
255    };
256
257
258    // 继续动作
259    function _continue() {
260
261        if (Timer) {
262            clearTimeout(Timer);
263        }
264        if (settings.auto) {
265            Timer = setTimeout(slide, settings.space / 2);
266        }
267    };
268    $(settings.next_b).click(function() {
269        $conbox.finish();
270        clearTimeout(Timer);
271        index = last_index + 1;
272        slide();
273    });
274    $(settings.pre_b).click(function() {
275        $conbox.finish();
276        clearTimeout(Timer);
277        index = last_index - 1;
278        if (index == -1) {
279            index = $contents.length - 1;
280        }
281        slide();
282    });
283
284    slide(true); //初始化轮播
285}