$(function(){
	     /** 下拉框效果选项设置  start **/
	     var changeIndex=3;
		 $('#change1').change(function(){
		   changeIndex = $("#change1").val();
		 })
		 /** 下拉框效果选项设置  end  **/
         
	     var $obj = $('#students ul');
		 var len  = $obj.length;
		 var i = 0;
		 $("#students_next").click(function(){
		      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;
		 });	
		 $("#students_previous").click(function(){
		      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 停止动画，滑出开始动画.
         $('#students').hover(function(){
		      if(MyTime){
			     clearInterval(MyTime);
			  }
		 },function(){
              MyTime = setInterval(function(){
				 $("#students_next").trigger("click");
			  } , 4000);
		 })

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

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