// JavaScript Document

$(function(){
	     /** 下拉框效果选项设置  start **/
	     var changeIndex=3;
		 $('#change').change(function(){
		   changeIndex = $("#change").val();
		 })
		 /** 下拉框效果选项设置  end  **/
         var $n=$('#next');
		 var $p=$('#previous');
		 	$n.hide();
	     var $obj = $('#hot_ranks ul');
		 var len  = $obj.length;
		 var i = 0;
		 $n.click(function(){
		 	$p.show();
			$n.hide();
		      i++;
			  if(i==len){
			    i = 0;
			  }
			  if(changeIndex==1){//  这里是根据下拉框的值，来执行相应的效果。
				$obj.stop(true,true).hide().eq(i).show();
			  }else if(changeIndex==2){
                $obj.stop(true,true).hide().eq(i).slideDown(400);
			  }else if(changeIndex==3){
				$obj.stop(true,true).hide().eq(i).fadeIn(600);
				
			  }
			  
			  return false;
		 });	
		 $p.click(function(){
		 	$n.show();
			$p.hide();
		      i--;
			  if(i==-1){
			    i = len-1;
			  }
              if(changeIndex==1){
				$obj.stop(true,true).hide().eq(i).show();
			  }else if(changeIndex==2){
                $obj.stop(true,true).hide().eq(i).slideDown(400);
			  }else if(changeIndex==3){
				$obj.stop(true,true).hide().eq(i).fadeIn(600);
			  }
			  return false;
		 });
         
		 //滑入div 停止动画，滑出开始动画.
         $('#hot_ranks').hover(function(){
		      if(MyTime){
			     clearInterval(MyTime);
			  }
		 },function(){
              MyTime = setInterval(function(){
				 $("#next").trigger("click");
			  } , 2000000);
		 })

		 //每2秒，自动切换。触发".next"的click事件.
		 var MyTime = setInterval(function(){
		    $("#next").trigger("click");
		 } , 2000000);
	})

/*
stop(true,true):
第一个true是清除队列.
第二个true是说直接跳转到动画结束的状态.
stop(true,true).hide():
就是说，停止当前正在进行的动画，以及队列中等待的动画，
并且直接将属性设置成动画结束时的状态
*/