http://www.hementakipcial.com/template/eyou/pc/Js/osSlider.js

1/**
2 * osSlider 阳光轮播插件 v1.0
3 * objs 传送对象
4 */
5function osSlider(objs) {
6    var that = this; //that获得this的作用域 后面都是that 防止干扰
7    that.objs = objs; //将传送来的对象赋予this
8    that.pNode = $(that.objs.pNode); //pNode轮播容器对象
9    that.cNodes = that.pNode.find(that.objs.cNode); //cNodes轮播子节点对象集合
10    that.cNodeNums = that.cNodes.length; //预存轮播体的总数
11    that.nowNodeKey = 0; //初始第一次默认显示节点为第一个
12    that.width = that.cNodes.find('img').width();//得到容器的宽度
13    that.height = that.cNodes.find('img').height();//得到容器的高度
14    that.moveFlag = true;//添加是否可以进行下一个轮播状态
15    that.isPause = false;//是否暂停状态
16    that.speedNum = 0;//自动轮播的计数
17    if (!that.objs.speed) {//添加默认时间
18        that.objs.speed = 3000;
19    }
20    if (!that.objs.autoPlay) {//添加默认自动播放
21        that.objs.autoPlay = true;
22    }
23    that.init = function() {//轮播的初始化
24        that.pNode.addClass('osSlider-main');
25        that.pNode.css({//轮播容器的大小控制 启用bfc模式
26            'width':that.width,
27            'height':that.height,
28            'overflow':'hidden',
29            'position':'relative'
30        });
31        //创建上下条切换按钮
32        var $toggleBtn = $('<ul class="slider-btn"><li class="slider-btn-prev">prev</li><li class="slider-btn-next">next</li></ul>');
33        $toggleBtn.appendTo(that.pNode);
34        //为切换按钮绑定事件
35        $(that.pNode).find('.slider-btn-prev').bind('click',function(){
36            that.toggleMove('prev');
37        });
38        $(that.pNode).find('.slider-btn-next').bind('click',function(){
39            that.toggleMove('next');
40        });
41        //为高亮导航创建节点
42        var $navParent = $('<ul class="slider-nav"></ul>');
43        $navParent.appendTo(that.pNode);
44        that.cNodes.each(function(index, el) {//采用遍历，添加前后顺序
45            if (index==0) {//让第一个显示在前面 同时为每个轮播体创建对应nav点
46                var indexNum = 20;
47                $navParent.append('<li class="active">'+(index+1)+'</li>');
48            } else {
49                var indexNum = index;
50                $navParent.append('<li>'+(index+1)+'</li>');
51            }
52            $(this).css({//为每一个轮播体添加样式和顺序
53                'width':that.width + 'px',
54                'height':that.height + 'px',
55                'overflow':'hidden',
56                'position':'absolute',
57                'top':'0px',
58                'left':'0px',
59                'z-index':indexNum
60            });
61        });
62        //为高亮导航节点绑定事件
63        $(that.pNode).find('.slider-nav li').each(function(index, el) {
64            $(this).bind('click',function(){
65                that.toggleMove(false,index);
66            });
67        });
68        //判断是否自动播放
69        if (that.objs.autoPlay) {
70            that.moveTime();
71        }
72    }
73    /**
74     * 切换轮播后 轮播导航的高亮
75     * @param {Number} tid
76     */
77    that.sliderNavToggle = function(tid,nid) {    
78    //这里是加上自己的链接信达
79    //$("#sliderhref").attr("href",$(".slider-main").find("li").eq(tid).attr("rel"));
80    
81        $('.slider-nav li').each(function(index, el) {
82            if (index==tid||index==nid) {
83                $(this).toggleClass('active');                
84            }
85        });
86    }
87    /**
88     * 切换效果指令函数 避免BUG
89     * @param {String} command 'prev'|'next'
90     * @param {Number} tid 下一个要切换的tid
91     * command与tid可以缺省一个，函数自动判断
92     */
93    that.toggleMove = function(command,tid) {
94        if (that.moveFlag) {
95            if (!command) {
96                if (that.nowNodeKey==tid) {
97                    return;
98                } else if ((that.nowNodeKey==0&&tid==that.cNodeNums-1)||tid<that.nowNodeKey) {
99                    command = 'prev';
100                } else {
101                    command = 'next';
102                }
103            }
104            if (!tid) {
105                if(tid==0) {
106                } else if (command=='prev') {
107                    tid = that.nowNodeKey-1;
108                    if (that.nowNodeKey==0) {
109                        tid = that.cNodeNums-1;
110                    }
111                } else {
112                    tid = that.nowNodeKey+1;
113                    if (that.nowNodeKey==that.cNodeNums-1) {
114                        tid = 0;
115                    }
116                }
117            }
118            /**
119             * 随机函数
120             */
121            function random(min,max) {
122                return Math.floor(Math.random()*(max+1)-min);
123            }
124            that.moveSwitch(random(0,6),command,tid);
125        }
126    }
127    /**
128     * 根据分配的切换指令执行效果
129     * @param {Number} mid 动画指令
130     * @param {String} command 'prev'|'next'
131     * @param {Number} tid 下一个要切换的tid
132     */
133    that.moveSwitch = function(mid,command,tid) {
134        nid = that.nowNodeKey;
135        that.moveFlag = false;

136        that.speedNum = 0;
137        that.sliderNavToggle(nid,tid);
138        switch (mid) {
139            case 0:
140                that.gridTop(tid,0);
141                break;
142            case 1:
143                that.gridTop(tid,1);
144                break;
145            case 2:
146                that.gridTop(tid,2);
147                break;
148            case 3:
149                that.gridLeft(tid,0);
150                break;
151            case 4:
152                that.gridLeft(tid,1);
153                break;
154            case 5:
155                that.gridLeft(tid,2);
156                break;
157            case 6:
158                that.cellToggle(tid);
159                break;
160            default:
161                that.gridTop(tid);
162                break;
163        }
164    }
165    /**
166     * 栅格上下切换
167     */
168    that.gridTop = function(tid,showNum) {
169        that.cNodes[tid].style.zIndex = 19;//让下个节点准备好
170        var $backHTML = that.cNodes[that.nowNodeKey].innerHTML;//备份当前节点的内容
171        that.cNodes[that.nowNodeKey].innerHTML = '';//清空节点，方便使用
172        for (var i = 0; i < 12; i++) {//利用循环 创建出栅格节点
173            var $cvNode = $('<div class="cvNode"></div>');
174            $(that.cNodes[that.nowNodeKey]).append($cvNode);
175            $cvNode.html($backHTML);
176            $cvNode.css({//为每个栅格节点添加css样式
177                'position':'absolute',
178                'width':that.width/12+'px',
179                'height':that.height+'px',
180                'zIndex':20,
181                'overflow':'hidden',
182                'left':that.width/12*i+'px',
183                'top':'0'
184            });
185            $cvNode.find('*').first().css({
186                'display':'block',
187                'margin-left':that.width/-12*i+'px'
188            });
189        }
190
191        //分配对应效果
192        switch (showNum) {
193            default:
194            case 0:
195                //添加动画过渡效果 张牙舞爪
196                $(that.cNodes[that.nowNodeKey]).find('.cvNode').each(function(index,el){
197                    if (index%2==0) {
198                        var topNums = that.height;
199                    } else {
200                        var topNums = that.height*-1;
201                    }
202                    $(this).animate({
203                        top:topNums + 'px'
204                    },1500);
205                });
206                setTimeout(function(){//动画结束后开始恢复原有状态
207                    that.moveFlag = true;
208                    that.cNodes[tid].style.zIndex = 20;
209                    that.cNodes[that.nowNodeKey].style.zIndex = that.nowNodeKey;
210                    $(that.cNodes[that.nowNodeKey]).html($backHTML);//清除动画产生的多余内容
211                    that.nowNodeKey = tid;//得到新的当前节点key
212                },1500);
213                break;
214            case 1:
215                //兼容到下面
216            case 2:
217                if (showNum==1) {
218                    //添加动画过渡效果 下降
219                    $(that.cNodes[that.nowNodeKey]).find('.cvNode').each(function(index,el){
220                        var sp = 80*index;
221                        $(this).animate({
222                            top: $(this).height() + 'px'
223                        },500+sp);
224                    });
225                } else {
226                    //添加动画过渡效果 上升
227                    $(that.cNodes[that.nowNodeKey]).find('.cvNode').each(function(index,el){
228                        var sp = 80*index;
229                        $(this).animate({
230                            top: $(this).height()*-1 + 'px'
231                        },500+sp);
232                    });
233                }
234                setTimeout(function(){//动画结束后开始恢复原有状态
235                    that.moveFlag = true;
236                    that.cNodes[tid].style.zIndex = 20;
237                    that.cNodes[that.nowNodeKey].style.zIndex = that.nowNodeKey;
238                    $(that.cNodes[that.nowNodeKey]).html($backHTML);//清除动画产生的多余内容
239                    that.nowNodeKey = tid;//得到新的当前节点key
240                },1380);
241                break;
242        }
243    }
244
245    /**
246     * 栅格左右张牙舞爪切换
247     */
248    that.gridLeft = function(tid,showNum) {
249        that.cNodes[tid].style.zIndex = 19;//让下个节点准备好
250        var $backHTML = that.cNodes[that.nowNodeKey].innerHTML;//备份当前节点的内容
251        that.cNodes[that.nowNodeKey].innerHTML = '';

251//清空节点，方便使用
252        for (var i = 0;i<12;i++) {//利用循环 创建出栅格节点
253            var $cvNode = $('<div class="cvNode"></div>');
254            $(that.cNodes[that.nowNodeKey]).append($cvNode);
255            $cvNode.html($backHTML);
256            $cvNode.css({//为每个栅格节点添加css样式
257                'position':'absolute',
258                'width':that.width+'px',
259                'height':that.height/12+'px',
260                'zIndex':20,
261                'overflow':'hidden',
262                'left':'0',
263                'top':that.height/12*i+'px',
264            });
265            $cvNode.find('*').first().css({
266                'display':'block',
267                'margin-top':that.height/-12*i+'px'
268            });
269        }
270        switch (showNum) {
271            default:
272            case 0:
273                //添加动画过渡效果 张牙舞爪
274                $(that.cNodes[that.nowNodeKey]).find('.cvNode').each(function(index,el){
275                    if (index%2==0) {
276                        var leftNums = that.width;
277                    } else {
278                        var leftNums = that.width*-1;
279                    }
280                    $(this).animate({
281                        'left':leftNums + 'px'
282                    },1500);
283                });
284                break;
285            case 1:
286            case 2:
287                if (showNum==1) {
288                    //添加动画过渡效果 向左
289                    $(that.cNodes[that.nowNodeKey]).find('.cvNode').each(function(index,el){
290                        var sp = 80*index;
291                        $(this).animate({
292                            'left':that.width*-1 + 'px'
293                        },620+sp);
294                    });
295                } else {
296                    //添加动画过渡效果 向右
297                    $(that.cNodes[that.nowNodeKey]).find('.cvNode').each(function(index,el){
298                        var sp = 80*index;
299                        $(this).animate({
300                            'left':that.width + 'px'
301                        },620+sp);
302                    });
303                }
304                break;
305        }
306        setTimeout(function(){//动画结束后开始恢复原有状态
307            that.moveFlag = true;
308            that.cNodes[tid].style.zIndex = 20;
309            that.cNodes[that.nowNodeKey].style.zIndex = that.nowNodeKey;
310            $(that.cNodes[that.nowNodeKey]).html($backHTML);//清除动画产生的多余内容
311            that.nowNodeKey = tid;//得到新的当前节点key
312        },1500);
313    }
314
315    //格子切换效果
316    that.cellToggle = function(tid) {
317        that.cNodes[tid].style.zIndex = 19;//让下个节点准备好
318        var $backHTML = that.cNodes[that.nowNodeKey].innerHTML;//备份当前节点的内容
319        that.cNodes[that.nowNodeKey].innerHTML = '';//清空节点，方便使用
320        for (var i = 0;i<20;i++) {//利用循环 创建出栅格节点
321            if (i<5) {//行数判断
322                var rows = 0;
323            } else if (i<10) {
324                var rows = 1;
325            } else if (i<15) {
326                var rows = 2;
327            } else {
328                var rows = 3;
329            }
330            var $cvNode = $('<div class="cvNode"></div>');
331            $(that.cNodes[that.nowNodeKey]).append($cvNode);
332            $cvNode.html($backHTML);
333            $cvNode.css({//为每个栅格节点添加css样式
334                'position':'absolute',
335                'width':that.width/5+'px',
336                'height':that.height/4+'px',
337                'zIndex':20,
338                'overflow':'hidden',
339                'left':that.width/5*(i%5)+'px',
340                'top':that.height/4*rows+'px',
341            });
342            $cvNode.find('*').first().css({
343                'display':'block',
344                'margin-left':that.width/-5*(i%5)+'px',
345                'margin-top':that.height/-4*rows+'px',
346            });
347        }
348        //添加动画过渡效果
349        $(that.cNodes[that.nowNodeKey]).find('.cvNode').each(function(index,el){
350            if (index%2==0) {
351                $(this).find('*').first().animate({
352                    "margin-left": $(this).width() + 'px'
353                }, 500);
354            }
355        });
356        setTimeout(function(){
357            $(that.cNodes[that.nowNodeKey]).find('.cvNode').each(function(index,el){
358                if (index%1==0) {
359                    $(this).find('*').first().animate({
360                        "margin-left": $(this).width() + 'px'
361                    }, 500);
362                }
363            });
364        },600);
365        setTimeout(function(){//动画结束后开始恢复原有状态
366            that.moveFlag = true;
367            that.cNodes[tid].style.zIndex = 20;
368            that.cNodes[that.nowNodeKey].style.zIndex = that.nowNodeKey;
369            $(that.cNodes[that.nowNodeKey]).html($backHTML);//清除动画产生的多余内容
370            that.nowNodeKey = tid;//得到新的当前节点key
371        },1100);
372    }
373
374    //自动播放控制方法
375    that.moveTime = function() {
376        setTimeout(function(){
377            if (that.moveFlag) {
378                that.speedNum++;
379                if (that.speedNum>=that.objs.speed/100) {
380                    that.speedNum = 0;
381                    that.toggleMove('next');
382                }
383            }
384            if (!that.isPause) {
385                setTimeout(arguments.callee,100);
386            }
387        },100);
388    }
389    that.init();
390}