基于JQuery的渐隐渐现轮播

/*
<div id="ads">
    <div>
      <ul>
        <li><a href="#" target="_blank"><img  src="/Content/images/home_ads1.jpg" /></a></li>
        <li><a href="#" target="_blank"><img  src="/Content/images/home_ads2.jpg" /></a></li>
        <li><a href="#" target="_blank"><img  src="/Content/images/home_ads3.jpg" /></a></li>
      </ul>
      <div>
        <div class="pre_left"><img  src="../../Content/images/left.png" /></div>
        <div class="next_right"><img  src="../../Content/images/right.png" /></div>
      </div>
    </div>
	<ul>
		<li class="focus"></li>
		<li></li>
		<li class="lastLi"></li>
	</ul>
</div>
*/
;(function(){
	var collection = {
            $ads:$("#ads"),
		    $adsContent: $("#ads>div>ul>li"),//大广告
            $arrows: $("#ads>div>div>div"),//切换箭头
		    $markPoints: $("#ads>ul>li"),//小圆点
		    HIDETIME:400,//消失时间
            SHOWTIME:800,//出现时间
		    INTERVALTIME:4000//间隔时间
	    },
        len = collection.$adsContent.length;

    collection.$ads.hover(function(){
        collection.$arrows.fadeIn("fast").css("display","inline-block");
    },function(){
        collection.$arrows.fadeOut("fast");
    });
   
    //循环向右切换
    function autoPlay(){
        turntoLorR(true,false);
    }
    var _setInterval=setInterval(autoPlay,collection.INTERVALTIME);

    //点击箭头左右切换
    collection.$arrows.each(function(index){
        if(index==0){
            $(this).on("click",function(){
                turntoLorR(false,true);
            });
        }
        else{
            $(this).on("click",function(){
                turntoLorR(true,true);
            });
        }
    })

    //点击小圆点切换
    collection.$markPoints.each(function(index){
    	$(this).on("click",function(){
    		collection.$adsContent.stop(false,true);
    		if(!collection.$adsContent.is(":animated")){
    			clearInterval(_setInterval);
	    		var $target = collection.$adsContent.eq(index);
	    		animate($target,true);
	    		animate($target.siblings(),false);
	    		markDot(collection.$markPoints.eq(index));
	    		_setInterval=setInterval(function(){autoPlay(collection.$adsContent)},collection.INTERVALTIME);
    		}
    	})
    })

    //左右切换
    function turntoLorR(directionisRight,clickLorR){
        if(clickLorR) collection.$adsContent.stop(false,true);
        if(!collection.$adsContent.is(":animated")){
            if(clickLorR) clearInterval(_setInterval);
    	    collection.$adsContent.each(function(index){
	    	    if(search($(this))){
	    		    animate($(this),false);
                    if(directionisRight){
                        if(index+1<len){
	    			      animate($(this).next(),true);
	    			      markDot(collection.$markPoints.eq(index+1));
	    		        }
	    		        else{
	    			        animate(collection.$adsContent.eq(0),true);
	    			        markDot(collection.$markPoints.eq(0));
	    		        }
                    }
                    else{
                        if(index-1>=0){
	    			      animate($(this).prev(),true);
	    			      markDot(collection.$markPoints.eq(index-1));
	    		        }
	    		        else{
	    			        animate(collection.$adsContent.eq(len-1),true);
	    			        markDot(collection.$markPoints.eq(len-1));
	    		        }
                    }
                    if(clickLorR) _setInterval=setInterval(autoPlay,collection.INTERVALTIME);
	    		    return false;
	    	    }
            });
        }
    }

    //负责标记小圆点
    function markDot($target){
    	$target.addClass("focus").siblings().removeClass("focus");
    }

    //负责判断当前大广告
    function search($target){
    	if($target.css("z-index")==1) return true;
    	else return false;
    }

    //负责动画效果
    function animate($target,show){
        if(show) $target.css("z-index","1").animate({opacity:1,filter:"alpha(opacity=100)"},collection.SHOWTIME);
        else $target.animate({opacity:0,filter:"alpha(opacity=0)"},collection.SHOWTIME,function(){$(this).css("z-index","-1")});
    }

})()