http://www.tasteyourbeer.com/skins/474311/js/jquery.SuperSlide.js

1
2(function($){
3	$.fn.slide=function(options){
4		$.fn.slide.deflunt={
5		effect : "fade", //效果 || fade：渐显； || top：上滚动；|| left：左滚动；|| topLoop：上循环滚动；|| leftLoop：左循环滚动；|| topMarquee：上无缝循环滚动；|| leftMarquee：左无缝循环滚动；
6		autoPlay:false, //自动运行
7		delayTime : 500, //效果持续时间
8		interTime : 2500,//自动运行间隔。当effect为无缝滚动的时候，相当于运行速度。
9		defaultIndex : 0,//默认的当前位置索引。0是第一个
10		titCell:".hd li",//导航元素
11		mainCell:".bd",//内容元素的父层对象
12		trigger: "mouseover",//触发方式 || mouseover：鼠标移过触发；|| click：鼠标点击触发；
13		scroll:1,//每次滚动个数。
14		vis:1,//visible，可视范围个数，当内容个数少于可视个数的时候，不执行效果。
15		titOnClassName:"on",//当前位置自动增加的class名称
16		autoPage:false,//系统自动分页，当为true时，titCell则为导航元素父层对象，同时系统会在titCell里面自动插入分页li元素(1.2版本新增)
17		prevCell:".prev",//前一个按钮元素。
18		nextCell:".next"//后一个按钮元素。
19		};
20
21		return this.each(function() {
22			var opts = $.extend({},$.fn.slide.deflunt,options);
23			var index=opts.defaultIndex;
24			var prevBtn = $(opts.prevCell, $(this));
25			var nextBtn = $(opts.nextCell, $(this));
26			var navObj = $(opts.titCell, $(this));//导航子元素结合
27			var navObjSize = navObj.size();
28			var conBox = $(opts.mainCell , $(this));//内容元素父层对象
29			var conBoxSize=conBox.children().size();
30			var slideH=0;
31			var slideW=0;
32			var selfW=0;
33			var selfH=0;
34			var autoPlay = opts.autoPlay;
35			var inter=null;//setInterval名称 
36			var oldIndex = index;
37
38			if(conBoxSize<opts.vis) return; //当内容个数少于可视个数，不执行效果。
39
40			//处理分页
41			if( navObjSize==0 )navObjSize=conBoxSize;
42			if( opts.autoPage ){
43				var tempS = conBoxSize-opts.vis;
44				navObjSize=1+parseInt(tempS%opts.scroll!=0?(tempS/opts.scroll+1):(tempS/opts.scroll)); 
45				navObj.html(""); 
46				for( var i=0; i<navObjSize; i++ ){ navObj.append("<li>"+(i+1)+"</li>") }
47				var navObj = $("li", navObj);//重置导航子元素对象
48			}
49
50			conBox.children().each(function(){ //取最大值
51				if( $(this).width()>selfW ){ selfW=$(this).width(); slideW=$(this).outerWidth(true);  }
52				if( $(this).height()>selfH ){ selfH=$(this).height(); slideH=$(this).outerHeight(true);  }
53			});
54
55			switch(opts.effect)
56			{
57				case "top": conBox.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; height:'+opts.vis*slideH+'px"></div>').css( { "position":"relative","padding":"0","margin":"0"}).children().css( {"height":selfH} ); break;
58				case "left": conBox.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; width:'+opts.vis*slideW+'px"></div>').css( { "width":conBoxSize*slideW,"position":"relative","overflow":"hidden","padding":"0","margin":"0"}).children().css( {"float":"left","width":selfW} ); break;
59				case "leftLoop":
60				case "leftMarquee":
61					conBox.children().clone().appendTo(conBox).clone().prependTo(conBox); 
62					conBox.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; width:'+opts.vis*slideW+'px"></div>').css( { "width":conBoxSize*slideW*3,"position":"relative","overflow":"hidden","padding":"0","margin":"0","left":-conBoxSize*slideW}).children().css( {"float":"left","width":selfW}  ); break;
63				case "topLoop":
64				case "topMarquee":
65					conBox.children().clone().appendTo(conBox).clone().prependTo(conBox); 
66					conBox.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; height:'+opts.vis*slideH+'px"></div>').css( { "height":conBoxSize*slideH*3,"position":"relative","padding":"0","margin":"0","top":-conBoxSize*slideH}).children().css( {"height":selfH} ); break;
67			}
68
69			//效果函数
70			var doPlay=function(){
71				switch(opts.effect)
72				{
73					case "fade": case "top": case "left": if ( index >= navObjSize) { index = 0; } else if( index < 0) { index = navObjSize-1; } break;
74					case "leftMarquee":case "topMarquee": if ( index>= 2) { index=1; } else if( index<0) { index = 0; } break;
75					case "leftLoop": case "topLoop":
76						var tempNum = index - oldIndex; 
77						if( navObjSize>2 && tempNum==-(navObjSize-1) ) tempNum=1;
78						if( navObjSize>2 && tempNum==(navObjSize-1) ) tempNum=-1;
79						var scrollNum = Math.abs( tempNum*opts.scroll );
80						if ( index >= navObjSize) { index = 0; } else if( index < 0) { index = navObjSize-1; }
81					break;
82				}
83				switch (opts.effect)
84				{
85					case "fade":conBox.children().stop(true,true).eq(index).fadeIn(opts.delayTime).siblings().hide();break;
86					case "top":conBox.stop(true,true).animate({"top":-index*opts.scroll*slideH},opts.delayTime);break;

87					case "left":conBox.stop(true,true).animate({"left":-index*opts.scroll*slideW},opts.delayTime);break;
88					case "leftLoop":
89						if(tempNum<0 ){
90								conBox.stop(true,true).animate({"left":-(conBoxSize-scrollNum )*slideW},opts.delayTime,function(){
91								for(var i=0;i<scrollNum;i++){ conBox.children().last().prependTo(conBox); }
92								conBox.css("left",-conBoxSize*slideW);
93							});
94						}
95						else{
96							conBox.stop(true,true).animate({"left":-( conBoxSize + scrollNum)*slideW},opts.delayTime,function(){
97								for(var i=0;i<scrollNum;i++){ conBox.children().first().appendTo(conBox); }
98								conBox.css("left",-conBoxSize*slideW);
99							});
100						}break;// leftLoop end
101
102					case "topLoop":
103						if(tempNum<0 ){
104								conBox.stop(true,true).animate({"top":-(conBoxSize-scrollNum )*slideH},opts.delayTime,function(){
105								for(var i=0;i<scrollNum;i++){ conBox.children().last().prependTo(conBox); }
106								conBox.css("top",-conBoxSize*slideH);
107							});
108						}
109						else{
110							conBox.stop(true,true).animate({"top":-( conBoxSize + scrollNum)*slideH},opts.delayTime,function(){
111								for(var i=0;i<scrollNum;i++){ conBox.children().first().appendTo(conBox); }
112								conBox.css("top",-conBoxSize*slideH);
113							});
114						}break;//topLoop end
115
116					case "leftMarquee":
117						var tempLeft = conBox.css("left").replace("px",""); 
118
119						if(index==0 ){
120								conBox.animate({"left":++tempLeft},0,function(){
121									if( conBox.css("left").replace("px","")>= 0){ for(var i=0;i<conBoxSize;i++){ conBox.children().last().prependTo(conBox); }conBox.css("left",-conBoxSize*slideW);}
122								});
123						}
124						else{
125								conBox.animate({"left":--tempLeft},0,function(){
126									if(  conBox.css("left").replace("px","")<= -conBoxSize*slideW*2){ for(var i=0;i<conBoxSize;i++){ conBox.children().first().appendTo(conBox); }conBox.css("left",-conBoxSize*slideW);}
127								});
128						}break;// leftMarquee end
129
130						case "topMarquee":
131						var tempTop = conBox.css("top").replace("px",""); 
132							if(index==0 ){
133									conBox.animate({"top":++tempTop},0,function(){
134										if( conBox.css("top").replace("px","") >= 0){ for(var i=0;i<conBoxSize;i++){ conBox.children().last().prependTo(conBox); }conBox.css("top",-conBoxSize*slideH);}
135									});
136							}
137							else{
138									conBox.animate({"top":--tempTop},0,function(){
139										if( conBox.css("top").replace("px","")<= -conBoxSize*slideH*2){ for(var i=0;i<conBoxSize;i++){ conBox.children().first().appendTo(conBox); }conBox.css("top",-conBoxSize*slideH);}
140									});
141							}break;// topMarquee end
142
143
144				}//switch end
145					navObj.removeClass(opts.titOnClassName).eq(index).addClass(opts.titOnClassName);
146					oldIndex=index;
147			};
148			//初始化执行
149			doPlay();
150
151			//自动播放
152			if (autoPlay) {
153					if( opts.effect=="leftMarquee" || opts.effect=="topMarquee"  ){
154						index++; inter = setInterval(doPlay, opts.interTime);
155						conBox.hover(function(){if(autoPlay){clearInterval(inter); }},function(){if(autoPlay){clearInterval(inter);inter = setInterval(doPlay, opts.interTime);}});
156					}else{
157						 inter=setInterval(function(){index++; doPlay() }, opts.interTime); 
158						$(this).hover(function(){if(autoPlay){clearInterval(inter); }},function(){if(autoPlay){clearInterval(inter); inter=setInterval(function(){index++; doPlay() }, opts.interTime); }});
159					}
160			}
161
162			//鼠标事件
163			var mst;
164			if(opts.trigger=="mouseover"){
165				navObj.hover(function(){ clearTimeout(mst); index=navObj.index(this); mst = window.setTimeout(doPlay,200); }, function(){ if(!mst)clearTimeout(mst); });
166			}else{ navObj.click(function(){index=navObj.index(this);  doPlay(); })  }
167			nextBtn.click(function(){ index++; doPlay(); });
168			prevBtn.click(function(){  index--; doPlay(); });
169
170    	});//each End
171
172	};//slide End
173
174})(jQuery);
175
176
177 //点击展开产品目录
178function navList(id) {
179    var $obj = $("#nav_dot"), $item = $("#J_nav_" + id);
180    $item.addClass("on").parent().removeClass("none").parent().addClass("selected");
181    $obj.find(".h").hover(function () {
182        $(this).addClass("hover");
183    }, function () {
184        $(this).removeClass("hover");
185    });
186    $obj.find("p").hover(function () {
187        if ($(this).hasClass("on")) { return; }
188        $(this).addClass("hover");
189    }, function () {
190        if ($(this).hasClass("on")) { return; }
191        $(this).removeClass("hover");
192    });
193    $obj.find(".h").click(function () {
194        var $div = $(this).siblings(".list-item");
195        if ($(this).parent().hasClass("selected")) {
196            $div.slideUp(300);
197            $(this).parent().removeClass("selected");
198        }
199        if ($div.is(":hidden")) {
200            $("#nav_dot li").find(".list-item").slideUp(300);
201            $("#nav_dot li").removeClass("selected");
202            $(this).parent().addClass("selected");
203            $div.slideDown(300);
204
205        } else {
206            $div.slideUp(300);
207        }
208    });
209}
210