$(function() {
	//var swidth = $("#focusindex").width(); //��ȡ����ͼ�ŀ�ȣ���ʾ�����
	var len = $("#focusindex ul li").length; //��ȡ����ͼ����
	var index = 0;
	var pictimer;

	//���´���������ְ�ť�ͱ�ť��i�͸������������һҳ����һҳ������ť
	var btn = "<div class='btn'>";
	for(var i=0; i < len; i++) {
		btn += "<span></span>";
	}
	btn += "</div><div class='prenext2 pre2'></div><div class='prenext2 next2'></div>";
	$("#focusindex").append(btn);

	//ϊс��ť�����껬���¼�������ʾ��ӧ������
	$("#focusindex .btn span").css("opacity",1).mouseover(function() {
		index = $("#focusindex .btn span").index(this);
		showpics(index);
	}).eq(0).trigger("mouseover");

	//��һҳ����һҳ��ť͸���ȴ���
/*	$("#focusindex").hover(function() {
		$("#focusindex .pre").animate({"left":"10%","opacity":"1"},300);
		$("#focusindex .next").animate({"right":"10%","opacity":"1"},300);
	},function() {
		$("#focusindex .pre").animate({"left":"0%","opacity":"0"},300);
		$("#focusindex .next").animate({"right":"0%","opacity":"0"},300);
	});*/

	//��һҳ��ť
	$("#focusindex .pre2").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showpics(index);
	});

	//��һҳ��ť
	$("#focusindex .next2").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showpics(index);
	});

	//ipai
	$("#focusindex").on("swipeleft",function(){
		index -= 1;
		if(index == -1) {index = len - 1;}
		showpics(index);
	});
	$("#focusindex").on("swiperight",function(){
		index += 1;
		if(index == len) {index = 0;}
		showpics(index);
	});

	//����ϊ���ҹ�����������liԪ�ض�����ͬһ�����󸡶�������������ҫ�������χulԪ�صŀ��
	//$("#focusindex ul").css("width",swidth * (len));
	
	//��껬�ͻ���ͼʱֹͣ�զ����ţ�����ʱ��ʼ�զ�����
	$("#focusindex").hover(function() {
		clearinterval(pictimer);
	},function() {
		pictimer = setinterval(function() {
			showpics(index);
			index++;
			if(index == len) {index = 0;}
		},4000); //��4000�����զ����ŵļ�����λ������
	}).trigger("mouseleave");

	//��ʾͼƭ���������ݽ��յ�indexֵ��ʾ��ӧ������
	function showpics(index) { //��ͨ�л�
		//var nowleft = -index*swidth; //����indexֵ����ulԪ�ص�leftֵ
		//$("#focusindex ul").stop(true,false).animate({"left":nowleft},300); //ͨ��animate()����ulԪ�ع������������position
		//$("#focusindex .btn span").removeclass("on").eq(index).addclass("on"); //ϊ��ǰ�i�ť�л���ѡ�е�ч��
		$("#focusindex .btn span").stop(true,false).removeclass("on").eq(index).stop(true,false).addclass("on"); //ϊ��ǰ�i�ť�л���ѡ�е�ч��
		$("#focusindex ul li").stop(true,false).animate({"opacity":"0"},300).css("z-index",0).removeclass("bannerdh").eq(index).stop(true,false).animate({"opacity":"1"},300).addclass("bannerdh").css("z-index",0); //ϊ��ǰ�i�ť�л���ѡ�е�ч��
	}
});