https://zhjingmumold.com/themes/simplebootx/style/js/lunboba.js

1/*
2 * create by zhangxiaojian
3 *璋冪敤鏂规硶 $(ID/class).slide({
4 *	autoplay:true/false,
5 *	autoTime:4000  //鑷繁璁惧畾 
6 *});
7 *
8 *
9 */
10
11 (function ($) {
12	$.fn.slide = function(options) { 
13		var dft = {
14			zs_lunLock:true,
15			autoplay:true,
16			autoTime:4000,
17			curentImg:0,
18			height:0,
19			clickLunTime:500
20		};
21		var ops = $.extend(dft,options);
22		
23		var zs_item = $(this).find(".slideItem");
24		var zs_itemWidth = $(this).find(".slideItem").width();
25		var t_time;
26		var isImgLoad = false;
27		var $this = this;
28		var zs_dotListHtml = "<ul>";
29		var zs_dots;
30		var maxHeight = 0;
31		
32		var checkVideo = 0;
33		
34		if(ops.height==0){
35			t_time = setInterval(function(){
36				$($this).find(".slideItem img").each(function(){
37					if(this.height === 0&&$(this).is(":visible")){
38						isImgLoad = false;
39						return false;
40					}else{
41						maxHeight = maxHeight>$(this).height() ? maxHeight:$(this).height();
42						isImgLoad = true;
43					}
44				});
45				if(isImgLoad){
46					maxHeight = maxHeight>$($this).height() ? maxHeight:$($this).height();
47					clearInterval(t_time);
48					if($($this).find(".slideItem").find("video").length>0&&checkVideo==0){
49						checkVideo=1;
50					}
51					if(checkVideo>0){
52						$($this).find(".carouse").height(maxHeight-5);
53					}else{
54						$($this).find(".carouse").height(maxHeight);
55					}
56					$($this).find(".playBtn").css("top",(maxHeight-50)/2);
57					lunbo();
58				}
59				//ItemImgLoad(callback); // 閫掑綊鎵弿
60				//console.log();
61			},100); // 鎴戣繖閲岃缃殑鏄�100姣灏辨壂鎻忎竴娆★紝鍙互鑷繁璋冩暣
62			
63		}
64		function lunbo(){
65			zs_itemWidth = $($this).find(".slideItem").width();
66			if(ops.height==0){
67				if(checkVideo>0){
68					$($this).find(".carouse").height($($this).find(".slideItem").height()-5);
69				}else{
70					$($this).find(".carouse").height($($this).find(".slideItem").height());
71				}
72				$($this).find(".playBtn").css("top",($($this).find(".slideItem").height()-50)/2);
73			}else{
74				$($this).find(".carouse").height(ops.height);
75			}
76			for(var i=0;i<zs_item.length;i++){
77				$($this).find(".itemIndex"+i).css("left",zs_itemWidth*i);
78			}
79		}
80		$(window).resize(function() {
81			lunbo();
82		});
83		for(var i=0;i<zs_item.length;i++){
84			var toLeft = zs_itemWidth*i;
85			$(this).find(zs_item[i]).css("left",toLeft);
86			$(this).find(zs_item[i]).addClass("itemIndex"+i);
87			zs_dotListHtml+='<li class="dot" dotIndex='+i+'>'+(( i > 8 ) ? ( i + 1 ) : ( "0" + (i + 1) ))+'</li>';
88			if(i==zs_item.length-1){
89				zs_dotListHtml+="<span class='slide-count'>/"+(( zs_item.length > 9 ) ? ( zs_item.length ) : ( "0" + zs_item.length ))+"</span></ul>";
90				var zs_showWord = "<p class='showLunWord'></p>";
91				$(this).find(".dotList").html(zs_dotListHtml);
92				$(this).find(".arti-content").html(zs_showWord);
93				$(this).find('.dotList ul li').first().addClass("active");
94				 $($this).find(".arti-content .showLunWord").html($($this).find(zs_item[0]).find(".slidedetail").html());
95				zs_dots = $(this).find('.dot');
96			}
97		}
98		var zs_next = function(){
99			lunbo();
100			if(ops.zs_lunLock){
101				ops.zs_lunLock = false;
102				var Move_left =0;
103				var intemcount = zs_item.length-1;
104				$($this).find(".itemIndex"+intemcount).css("left",-zs_itemWidth);
105				 for(var i=0;i<zs_item.length;i++){
106					Move_left =parseFloat($($this).find(".itemIndex"+i).css("left"))+parseFloat($($this).find(".slideItem").width());
107					$($this).find(".itemIndex"+i).animate({left: Move_left},500);
108				}
109				 for(var j=0;j<zs_item.length;j++){
110					 var className = $($this).find(zs_item[j]).attr("class")+"";
111					 var count = className.indexOf("itemIndex");
112					 var index = className.substring(count,className.length);
113					 var pp = index.indexOf(" ");
114					 if(pp>0){
115						 index = index.substring(9,pp);
116					 }else{
117						 index = index.substring(9,index.length);
118					 }
119					 $($this).find(zs_item[j]).removeClass("itemIndex"+index);
120					 var next_index = parseInt(index)+1;
121					 if(next_index==zs_item.length){
122						 next_index=0;
123					 }
124					 //鎺у埗搴曢儴鍦嗙偣
125					 $($this).find(zs_dots[j]).removeClass("active");
126					 if(next_index==0){
127						 $($this).find(zs_dots[j]).addClass("active");
128						 $($this).find(".arti-content .showLunWord").html($($this).find(zs_item[j]).find(".slidedetail").html());
129					 }
130					 $($this).find(zs_item[j]).addClass("itemIndex"+next_index);
131				 }
132				 
133				 setTimeout(function(){
134					 ops.zs_lunLock = true;
135				 },500);
136			}
137		};
138		var zs_pre = function(){
139			lunbo();
140			if(ops.zs_lunLock){
141				ops.zs_lunLock = false;
142				var Move_left =0;
143				 for(var i=0;i<zs_item.length;i++){
144					Move_left =parseFloat($($this).find(".itemIndex"+i).css("left"))-parseFloat($($this).find(".slideItem").width());
145					$($this).find(" .itemIndex"+i).animate({left: Move_left},500);
146				}
147				 for(var j=0;j<zs_item.length;j++){
148					 var className = $($this).find(zs_item[j]).attr("class")+"";
149					 var count = className.indexOf("itemIndex");
150					 var index = className.substring(count,className.length);
151					 var pp = index.indexOf(" ");
152					 if(pp>0){
153						 index = index.substring(9,pp);
154					 }else{
155						 index = index.substring(9,index.length);
156					 }
157					 $($this).find(zs_item[j]).removeClass("itemIndex"+index);
158					 var next_index = parseInt(index)-1;
159					 if(next_index==-1){
160						 next_index=zs_item.length-1;
161					 }
162					
163					//鎺у埗搴曢儴鍦嗙偣
164					 $($this).find(zs_dots[j]).removeClass("active");
165					 if(next_index==0){
166						 $($this).find(zs_dots[j]).addClass("active");
167						 $($this).find(".arti-content .showLunWord").html($($this).find(zs_item[j]).find(".slidedetail").html());
168					 }
169					 $($this).find(zs_item[j]).addClass("itemIndex"+next_index);
170				 }
171				
172				  setTimeout(function(){
173					  var des = parseFloat(zs_itemWidth)*(zs_item.length-1);
174					  $($this).find(".itemIndex"+(zs_item.length-1)).animate({left: des},0.01);
175					  ops.zs_lunLock = true;
176				  },500);
177			}
178		}
179		$(this).find(".Next").click(function(){
180			zs_next();
181		});
182		$(this).find(".Previous").click(function(){zs_pre();});
183		$(this).find(".dot").click(function(){
184			lunbo();
185			var dotIntex = $(this).attr("dotIndex");
186			var itemIndex="";
187			for(var i=0;i<zs_item.length;i++){
188				var tagClass = $($this).find(zs_item[i]).attr("class")+"";
189				if(tagClass.indexOf("itemIndex0")>0){
190					itemIndex = i;
191				}
192			}
193			var Dvalue = dotIntex-itemIndex;
194			if(Dvalue>0){
195				zs_prevGo(Dvalue);
196			}else{
197				zs_nextGo(-Dvalue);
198			}
199		});
200			var zs_prevGo = function(Dvalue){
201				if(ops.zs_lunLock){
202					ops.zs_lunLock = false;
203					var Move_left =0;

204					 for(var i=0;i<zs_item.length;i++){
205						Move_left =parseFloat($($this).find(".itemIndex"+i).css("left"))-Dvalue*parseFloat($($this).find(".slideItem").width());
206						$($this).find(" .itemIndex"+i).animate({left: Move_left},ops.clickLunTime);
207					}
208					 for(var j=0;j<zs_item.length;j++){
209						 var className = $($this).find(zs_item[j]).attr("class")+"";
210						 var count = className.indexOf("itemIndex");
211						 var index = className.substring(count,className.length);
212						 var pp = index.indexOf(" ");
213						 if(pp>0){
214							 index = index.substring(9,pp);
215						 }else{
216							 index = index.substring(9,index.length);
217						 }
218						 $($this).find(zs_item[j]).removeClass("itemIndex"+index);
219						 var next_index = parseInt(index)-Dvalue;
220						 if(next_index<0){
221							 next_index=zs_item.length+next_index;
222						 }
223						
224						//鎺у埗搴曢儴鍦嗙偣
225						 $($this).find(zs_dots[j]).removeClass("active");
226						 if(next_index==0){
227							 $($this).find(zs_dots[j]).addClass("active");
228							 $($this).find(".arti-content .showLunWord").html($($this).find(zs_item[j]).find(".slidedetail").html());
229						 }
230						 $($this).find(zs_item[j]).addClass("itemIndex"+next_index);
231					 }
232					
233					  setTimeout(function(){
234						  for(var m=0;m<zs_item.length;m++){
235							  var des = parseFloat(zs_itemWidth)*(zs_item.length-1-m);
236							  $($this).find(".itemIndex"+(zs_item.length-1-m)).animate({left: des},0.01);
237							  
238						  }
239						  ops.zs_lunLock = true;
240					  },500);
241				}
242				
243			}
244			var zs_nextGo = function(Dvalue){
245				if(ops.zs_lunLock){
246					ops.zs_lunLock = false;
247					var Move_left =0;
248					var y=zs_item.length-1;
249					for(var x=0;x<Dvalue;x++){
250						$($this).find(".itemIndex"+y).css("left",-zs_itemWidth-x*zs_itemWidth);
251						 y--;
252					}
253					 for(var i=0;i<zs_item.length;i++){
254						Move_left =parseFloat($($this).find(".itemIndex"+i).css("left"))+Dvalue*parseFloat($($this).find(".slideItem").width());
255						$($this).find(" .itemIndex"+i).animate({left: Move_left},ops.clickLunTime);
256					}
257					 for(var j=0;j<zs_item.length;j++){
258						 var className = $($this).find(zs_item[j]).attr("class")+"";
259						 var count = className.indexOf("itemIndex");
260						 var index = className.substring(count,className.length);
261						 var pp = index.indexOf(" ");
262						 if(pp>0){
263							 index = index.substring(9,pp);
264						 }else{
265							 index = index.substring(9,index.length);
266						 }
267						 $($this).find(zs_item[j]).removeClass("itemIndex"+index);
268						 var next_index = parseInt(index)+Dvalue;
269						 if(next_index>=zs_item.length){
270							 next_index=next_index-zs_item.length;
271						 }
272						 //鎺у埗搴曢儴鍦嗙偣
273						 $($this).find(zs_dots[j]).removeClass("active");
274						 if(next_index==0){
275							 $($this).find(zs_dots[j]).addClass("active");
276							 $($this).find(".arti-content .showLunWord").html($($this).find(zs_item[j]).find(".slidedetail").html());
277						 }
278						 $($this).find(zs_item[j]).addClass("itemIndex"+next_index);
279					 }
280					 
281					 setTimeout(function(){
282						 ops.zs_lunLock = true;
283					 },500);
284				}
285			};
286			$(this).bind('touchstart',function(e){
287			    startX = e.originalEvent.changedTouches[0].pageX,
288			    startY = e.originalEvent.changedTouches[0].pageY;
289			});
290			$(this).bind('touchend',function(e){
291				endX = e.originalEvent.changedTouches[0].pageX,
292				endY = e.originalEvent.changedTouches[0].pageY;
293				//鑾峰彇婊戝姩璺濈
294				distanceX = endX-startX;
295				distanceY = endY-startY;
296				//鍒ゆ柇婊戝姩鏂瑰悜
297				if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
298					zs_next();
299				}else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
300					zs_pre();
301				}
302			});
303			
304			if (ops.autoplay) {
305				var zs_lunInterval = setInterval(function () {		
306					zs_pre()
307				}, ops.autoTime);
308
309				$(this).hover(function () {
310					clearInterval(zs_lunInterval);
311				}, function () {
312					zs_lunInterval = setInterval(function () {					
313						zs_pre()
314					}, ops.autoTime);
315				});
316
317				if("onvisibilitychange" in document){
318					document.addEventListener("visibilitychange", function() {
319						if (document.hidden === true) {
320							clearInterval(zs_lunInterval);
321						} else {
322							clearInterval(zs_lunInterval);
323							zs_lunInterval = setInterval(function () {					
324								zs_pre()
325							}, ops.autoTime);
326						}
327					});

328				}
329			}
330		
331	};
332})(jQuery);	
333$(function(){
334	$("#banner").slide({
335		autoplay:true,
336		autoTime:6000,
337	});
338})