https://www.chyangwa.net/template/motorfans/portal/images/js/slider.js

1/**
2 * slider插件可悬停控制
3 */
4jQuery(function ($, window, document, undefined) {
5    
6    Slider = function (container, options) {
7        /*
8        options = {
9            auto: true,
10            time: 3000,
11            event: 'hover' | 'click',
12            mode: 'slide | fade',
13            controller: $(),
14            activeControllerCls: 'className',
15            exchangeEnd: $.noop
16        }
17        */
18
19        "use strict"; //stirct mode not support by IE9-
20
21        if (!container) return;
22
23        var options = options || {},
24            currentIndex = 0,
25            cls = options.activeControllerCls,
26            delay = options.delay,
27            isAuto = options.auto,
28            controller = options.controller,
29            event = options.event,
30            interval,
31            slidesWrapper = container.children().first(),
32            slides = slidesWrapper.children(),
33            length = slides.length,
34            childWidth = container.width(),
35            totalWidth = childWidth * slides.length;
36
37        function init() {
38            var controlItem = controller.children();
39
40            mode();
41
42            event == 'hover' ? controlItem.mouseover(function () {
43                stop();
44                var index = $(this).index();
45
46                play(index, options.mode);
47            }).mouseout(function () {
48                isAuto && autoPlay();
49            }) : controlItem.click(function () {
50                stop();
51                var index = $(this).index();
52
53                play(index, options.mode);
54                isAuto && autoPlay();
55            });
56
57            isAuto && autoPlay();
58        }
59
60        //animate mode
61        function mode() {
62            var wrapper = container.children().first();
63
64            options.mode == 'slide' ? wrapper.width(totalWidth) : wrapper.children().css({
65                'position': 'absolute',
66                'left': 0,
67                'top': 0
68            })
69                .first().siblings().hide();
70        }
71
72        //auto play
73        function autoPlay() {
74            interval = setInterval(function () {
75                triggerPlay(currentIndex);
76            }, options.time);
77        }
78
79        //trigger play
80        function triggerPlay(cIndex) {
81            var index;
82
83            (cIndex == length - 1) ? index = 0 : index = cIndex + 1;
84            play(index, options.mode);
85        }
86
87        //play
88        function play(index, mode) {
89            slidesWrapper.stop(true, true);
90            slides.stop(true, true);
91
92            mode == 'slide' ? (function () {
93                if (index > currentIndex) {
94                    slidesWrapper.animate({
95                        left: '-=' + Math.abs(index - currentIndex) * childWidth + 'px'
96                    }, delay);
97                } else if (index < currentIndex) {
98                    slidesWrapper.animate({
99                        left: '+=' + Math.abs(index - currentIndex) * childWidth + 'px'
100                    }, delay);
101                } else {
102                    return;
103                }
104            })() : (function () {
105                if (slidesWrapper.children(':visible').index() == index) return;
106                slidesWrapper.children().fadeOut(delay).eq(index).fadeIn(delay);
107            })();
108
109            try {
110                controller.children('.' + cls).removeClass(cls);
111                controller.children().eq(index).addClass(cls);
112            } catch (e) { }
113
114            currentIndex = index;
115
116            options.exchangeEnd && typeof options.exchangeEnd == 'function' && options.exchangeEnd.call(this, currentIndex);
117        }
118
119        //stop
120        function stop() {
121            clearInterval(interval);
122        }
123
124        //prev frame
125        function prev() {
126            stop();
127
128            currentIndex == 0 ? triggerPlay(length - 2) : triggerPlay(currentIndex - 2);
129
130            isAuto && autoPlay();
131        }
132
133        //next frame
134        function next() {
135            stop();
136
137            currentIndex == length - 1 ? triggerPlay(-1) : triggerPlay(currentIndex);
138
139            isAuto && autoPlay();
140        }
141
142        //init
143        init();
144
145        //expose the Slider API
146        return {
147            prev: function () {
148                prev();
149            },
150            next: function () {
151                next();
152            }
153        }
154    };
155
156}(jQuery, window, document));