多屏自动切换jQuery效果，可手动切换

一个新蛋网首页多屏自动切换效果。顺便分享之。

思路很简单，详见代码。本来是想封装成插件的，但一想，这种效果，也不大可能同时用多个，就偷懒直接写了。相关自定义的变量都放在一起了，一些功能函数也都有注释。自测兼容性良好，若有BUG请反馈。

jQuery代码：

01    var imgField=$('#J_imgList');
02    var imgList=$('#J_imgList>li');
03    var navField=$('#J_navList');
04    var navList=$('#J_navList>li');
05    var btnPrev=$('#J_prev');
06    var btnNext=$('#J_next');
07    var turnPage=4;//每屏显示数
08    var T=5000;//切换间隔时间
09    var turnT=300;//animate时间
10    var N=0;//图片初始索引
11    var P=1;//屏初始索引
12
13    var goFun=null;
14    var hoverFun=null;
15    var triggerFun=null;
16    var delayFun=null
17    var navListW=navList.outerWidth(true);
18    var turnPages=Math.ceil(navList.size()/turnPage);
19    //初始图片区域高度与标题区域宽度
20    imgField.height(imgList.size()*imgList.height());
21    navField.width(navList.size()*navListW);
22    //初始自动切换
23    GO();
24    //自动切换
25    function GO() {
26        imgField.stop().animate({
27            marginTop:-N*(imgList.height())
28        },turnT);
29        navList.eq(N).addClass('hover').siblings().removeClass('hover');
30        if(N%turnPage==0) {
31            navField.stop().animate({
32                marginLeft:-N*navListW+'px'
33            },turnT);
34        }
35        N++;
36        N= N>=imgList.size()?0:N;
37        P=Math.ceil(N/turnPage);
38        goFun=setTimeout(GO,T);
39    }
40
41    //停止切换
42    function STOP() {
43        clearTimeout(goFun);
44    }
45
46    //标题划过移出
47    navList.hover( function() {
48        clearTimeout(delayFun);
49        STOP();
50        N=navList.index(this);
51        imgField.stop().animate({
52            marginTop:-N*(imgList.height())
53        },turnT);
54        $(this).addClass('hover').siblings().removeClass('hover');
55    }, function() {
56        N++;
57        delayFun=setTimeout(GO,T)
58    });
59    //图片划过移出
60    imgList.hover( function() {
61        N=imgList.index(this);
62        navList.eq(N).trigger('mouseover');
63    }, function() {
64        navList.eq(N).trigger('mouseleave');
65    });
66    //左切换
67    btnPrev.click( function() {
68        if(P==1) {
69            navField.animate({
70                marginLeft:-turnPage*navListW*(turnPages-1)+'px'
71            },turnT);
72            P=turnPages;
73        } else {
74            STOP();
75            P--;
76            navField.animate({
77                marginLeft:-turnPage*navListW*(P-1)+'px'
78            },turnT);
79        }
80        navList.eq((P-1)*turnPage).trigger('mouseover');
81        GO();
82    });
83    //右切换
84    btnNext.click( function() {
85        if(P==turnPages) {
86            navField.animate({
87                marginLeft:0
88            },turnT);
89            P=1;
90        } else {
91            STOP();
92            P++;
93            navField.animate({
94                marginLeft:-turnPage*navListW*P+'px'
95            });
96        }
97        navList.eq((P-1)*turnPage).trigger('mouseover');
98        GO();
99    });

可自由转载及使用,但请注明出处!

转载自 多屏自动切换jQuery效果，可手动切换@Mr.Think