http://zt.5588.tv/js/js1.js

1$(function() {
2	var sWidth = $("#focus").width(); //»ñÈ¡½¹µãͼµÄ¿í¶È£¨ÏÔʾÃæ»ý£©
3	var len = $("#focus ul li").length; //»ñÈ¡½¹µãͼ¸öÊý
4	var index = 0;
5	var picTimer;
6	
7	//ÒÔÏ´úÂëÌí¼ÓÊý×Ö°´Å¥ºÍ°´Å¥ºóµÄ°ë͸Ã÷Ìõ£¬»¹ÓÐÉÏÒ»Ò³¡¢ÏÂÒ»Ò³Á½¸ö°´Å¥
8	var btn = "<div class='btnBg'></div><div class='btn'>";
9	for(var i=0; i < len; i++) {
10		btn += "<span></span>";
11	}
12	btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
13	$("#focus").append(btn);
14	$("#focus .btnBg").css("opacity",0.5);
15
16	//ΪС°´Å¥Ìí¼ÓÊó±ê»¬Èëʼþ£¬ÒÔÏÔʾÏàÓ¦µÄÄÚÈÝ
17	$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
18		index = $("#focus .btn span").index(this);
19		showPics(index);
20	}).eq(0).trigger("mouseenter");
21
22	//ÉÏÒ»Ò³¡¢ÏÂÒ»Ò³°´Å¥Í¸Ã÷¶È´¦Àí
23	$("#focus .preNext").css("opacity",0.2).hover(function() {
24		$(this).stop(true,false).animate({"opacity":"0.5"},300);
25	},function() {
26		$(this).stop(true,false).animate({"opacity":"0.2"},300);
27	});
28
29	//ÉÏÒ»Ò³°´Å¥
30	$("#focus .pre").click(function() {
31		index -= 1;
32		if(index == -1) {index = len - 1;}
33		showPics(index);
34	});
35
36	//ÏÂÒ»Ò³°´Å¥
37	$("#focus .next").click(function() {
38		index += 1;
39		if(index == len) {index = 0;}
40		showPics(index);
41	});
42
43	//±¾ÀýΪ×óÓÒ¹ö¶¯£¬¼´ËùÓÐliÔªËض¼ÊÇÔÚͬһÅÅÏò×󸡶¯£¬ËùÒÔÕâÀïÐèÒª¼ÆËã³öÍâΧulÔªËصĿí¶È
44	$("#focus ul").css("width",sWidth * (len));
45	
46	//Êó±ê»¬ÉϽ¹µãͼʱֹͣ×Ô¶¯²¥·Å£¬»¬³öʱ¿ªÊ¼×Ô¶¯²¥·Å
47	$("#focus").hover(function() {
48		clearInterval(picTimer);
49	},function() {
50		picTimer = setInterval(function() {
51			showPics(index);
52			index++;
53			if(index == len) {index = 0;}
54		},4000); //´Ë4000´ú±í×Ô¶¯²¥·ÅµÄ¼ä¸ô£¬µ¥Î»£ººÁÃë
55	}).trigger("mouseleave");
56	
57	//ÏÔʾͼƬº¯Êý£¬¸ù¾Ý½ÓÊÕµÄindexÖµÏÔʾÏàÓ¦µÄÄÚÈÝ
58	function showPics(index) { //ÆÕͨÇл»
59		var nowLeft = -index*sWidth; //¸ù¾ÝindexÖµ¼ÆËãulÔªËصÄleftÖµ
60		$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //ͨ¹ýanimate()µ÷ÕûulÔªËعö¶¯µ½¼ÆËã³öµÄposition
61		//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //Ϊµ±Ç°µÄ°´Å¥Çл»µ½Ñ¡ÖеÄЧ¹û
62		$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //Ϊµ±Ç°µÄ°´Å¥Çл»µ½Ñ¡ÖеÄЧ¹û
63	}
64});