https://res.xincheping.com/js/2016/pc/v1/focus_slider.js

1/**
2 * slider插件可悬停控制
3 */
4; $(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));
157
158
159/*首页右侧的部落切换图*/
160
161function imgFocus(b, c) {
162    var d = this;
163    this.index = 1;
164    this.imgSize = $(b + " .focusPic img").size();
165    this.init = function() {
166        $(b + " .focusPic a img").clone().appendTo(b + " .focusPreview");
167        $(b + " .focusBtns").empty();
168        for (i = this.imgSize, j = 0; i > 0; i--, j++) {
169            $(b + " .focusBtns").append("<a>" + i + "</a>")
170        }
171        $(b + " .focusPic a").css("position", "absolute").eq(0).css("z-index", this.imgSize).css("position", "absolute");
172        $(b + " .focusPic a:gt(0)").css("z-index", 1);
173        this.setStatus(1);
174        this.bindEvent()
175    };
176    this.bindEvent = function() {
177        $(b + " .focusPreview img").hover(function() {
178            $(this).addClass("active")
179        },
180        function() {
181            $(this).removeClass("active");
182            $(b + " .focusPreview img").eq(d.index - 1).addClass("active")
183        });
184        $(b + " .focusPreview img").each(function(i) {
185            $(this).click(function() {
186                d.imgActive(i + 1)
187            })
188        });
189        $(b + " .focusBtns a").hover(function() {
190            $(this).addClass("active")
191        },
192        function() {
193            $(this).removeClass("active");
194            $(b + " .focusBtns a").eq(d.imgSize - d.index).addClass("active")
195        });
196        $(b + " .focusBtns a").each(function(i) {
197            $(this).click(function() {
198                d.imgActive(d.imgSize - i)
199            })
200        })
201    };
202    this.setStatus = function(i) {
203        $(b + " .focusPreview img").removeClass("active").eq(i - 1).addClass("active");
204        $(b + " .focusBtns a").removeClass("active").eq(this.imgSize - i).addClass("active");
205        $(b + " .focusTitles a").hide().eq(i - 1).show()
206    };
207    this.imgActive = function(i) {
208        if (d.index != i) {
209            var a = d.index;
210            $(b + " .focusPic a").eq(i - 1).css("z-index", d.imgSize - 1);
211            this.setStatus(i);
212            d.index = i;
213            $(b + " .focusPic a").eq(a - 1).fadeOut(500,
214            function() {
215                $(b + " .focusPic a").eq(i - 1).css("z-index", d.imgSize);
216                $(b + " .focusPic a").eq(d.index - 1).siblings().css("z-index", 0).show()
217            })
218        }
219    };
220    this.next = function() {
221        var a = d.index;
222        if (a >= d.imgSize) {
223            a = 1
224        } else {
225            a++
226        }
227        d.imgActive(a);
228        setTimeout(d.next, c)
229    };
230    this.play = function() {
231        this.init();
232        setTimeout(this.next, c)
233    }
234};
235/*小程序二维码*/
236$(document).ready(function(){
237
238$(".zx").hover(function(){
239$(this).children(".ewm_box").stop().slideDown();
240},function(){
241$(this).children(".ewm_box").stop().slideUp();
242});
243});