基于JQuery的渐隐渐现轮播

 <div id="ads">
     <div>
       <!--轮播图片-->
       <ul>
         <li><a  href="#" target="_blank"><img alt="" src="" /></a></li>
         <li><a  href="#" target="_blank"><img alt="" src="" /></a></li>
         <li><a  href="#" target="_blank"><img alt="" src="" /></a></li>
         <li><a  href="#" target="_blank"><img alt="" src="" /></a></li>
       </ul>
       <!--左右切换箭头-->
       <div>
         <div><img alt="" src="" /></div>
         <div><img alt="" src="" /></div>
       </div>
     </div>
   <!--导航小圆点-->
     <ul>
         <li class="focus"></li>
         <li></li>
     <li></li>
         <li class="lastLi"></li>
     </ul>
 </div>

 li{display: inline-block; float: left;}
   .lastLi{margin-right: 0 !important;}
   #ads{position: relative; margin-bottom:33px; width:100%; min-width: 1210px;height:512px;overflow: hidden;z-index:;}
   #ads>div{position:relative; margin:0 auto; width:inherit; min-width:1210px; height:inherit;}
   #ads>div>ul>li{display:none; position: absolute;top:;left:50%;margin-left:-960px; z-index:;}
   #ads>div>ul>li:first-child{display:block;}
   #ads>div>div{position:relative; width:1210px; height:290px; margin:0 auto;}
   #ads>div>div>div{position:absolute; display:none; top:222px; right:; width:67px; height:67px; cursor:pointer;z-index:; }
   #ads>div>div>div:first-child{left:;}
   #ads>ul{
     position: absolute;
     top: 480px;
     left: 50%;
     margin:0 0 0 -26px;
     padding:;
     z-index:;
   }
   #ads>ul>li{
     margin-right: 8px;
     padding:;
     width: 9px;
     height: 9px;
     border-radius: 10px;
     cursor: pointer;
     background:url() 0 0 no-repeat;
   }
   #ads>ul>li.focus{
     background:url() 0 -9px no-repeat;
   }

 ;(function(){
     var setting = {
             $ads:$("#ads"),
             $adsContent: $("#ads>div>ul>li"),//大广告
             $arrows: $("#ads>div>div>div"),//切换箭头
             $markPoints: $("#ads>ul>li"),//小圆点
             HIDETIME:400,//消失时间
             SHOWTIME:800,//出现时间
             INTERVALTIME:4000,//间隔时间
             animaChoice:0//0代表渐隐渐现，1代表滚动
         },
         currentIndex=0,
         len = setting.$adsContent.length,
         _setInterval=setInterval(autoPlay,setting.INTERVALTIME);

     setting.$ads.hover(function(){
         setting.$arrows.fadeIn("fast").css("display","inline-block");
     },function(){
         setting.$arrows.fadeOut("fast");
     });

     //向右切换
     function autoPlay(){
         switchAds(0,false);
     }

     //点击箭头切换
     setting.$arrows.each(function(index){
         if(index==0){
             $(this).on("click",function(){
                 switchAds(1,true);
             });
         }
         else{
             $(this).on("click",function(){
                 switchAds(0,true);
             });
         }
     })

     //点击小圆点切换
     setting.$markPoints.each(function(index){
         $(this).on("click",function(){
             switchAds(2,true,index);
         })
     })

     //切换
     function switchAds(clickStatus,beClicked,index){
         if(beClicked) setting.$adsContent.stop(false,true);
         if(!setting.$adsContent.is(":animated")){
             if(beClicked) clearInterval(_setInterval);
             animate(setting.$adsContent.eq(currentIndex),false,setting.animaChoice);
             switch(clickStatus){
                 case 0://选择下一张
                   currentIndex++;
                   break;
                 case 1://选择前一张
                   currentIndex--;
                   break;
                 case 2://选择被点击的
                   currentIndex=index;
                   break;
                 default:
                   break;
             }
             if(currentIndex==len) currentIndex=0;
             else if(currentIndex==-1) currentIndex=len-1;
             //console.log(currentIndex);
             animate(setting.$adsContent.eq(currentIndex),true,setting.animaChoice);
             markDot(setting.$markPoints.eq(currentIndex));
             if(beClicked) _setInterval=setInterval(autoPlay,setting.INTERVALTIME);
         }
     }

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

     //负责动画效果
     function animate($target,show,animaChoice){
         switch(animaChoice){
             case 0:
               if(show) $target.fadeIn(setting.SHOWTIME);
               else $target.fadeOut(setting.SHOWTIME);
               break;
             case 1:
               if(show) ;
               else ;
               break;
             default:
               break;
         }
     }

 })()