1 <div id="ads"> 2 <div> 3 <!--轮播图片--> 4 <ul> 5 <li><a href="#" target="_blank"><img alt="" src="" /></a></li> 6 <li><a href="#" target="_blank"><img alt="" src="" /></a></li> 7 <li><a href="#" target="_blank"><img alt="" src="" /></a></li> 8 <li><a href="#" target="_blank"><img alt="" src="" /></a></li> 9 </ul> 10 <!--左右切换箭头--> 11 <div> 12 <div><img alt="" src="" /></div> 13 <div><img alt="" src="" /></div> 14 </div> 15 </div> 16 <!--导航小圆点--> 17 <ul> 18 <li class="focus"></li> 19 <li></li> 20 <li></li> 21 <li class="lastLi"></li> 22 </ul> 23 </div>
1 li{display: inline-block; float: left;} 2 .lastLi{margin-right: 0 !important;} 3 #ads{position: relative; margin-bottom:33px; width:100%; min-width: 1210px;height:512px;overflow: hidden;z-index:0;} 4 #ads>div{position:relative; margin:0 auto; width:inherit; min-width:1210px; height:inherit;} 5 #ads>div>ul>li{display:none; position: absolute;top:0;left:50%;margin-left:-960px; z-index:1;} 6 #ads>div>ul>li:first-child{display:block;} 7 #ads>div>div{position:relative; width:1210px; height:290px; margin:0 auto;} 8 #ads>div>div>div{position:absolute; display:none; top:222px; right:0; width:67px; height:67px; cursor:pointer;z-index:3; } 9 #ads>div>div>div:first-child{left:0;} 10 #ads>ul{ 11 position: absolute; 12 top: 480px; 13 left: 50%; 14 margin:0 0 0 -26px; 15 padding: 0; 16 z-index: 11; 17 } 18 #ads>ul>li{ 19 margin-right: 8px; 20 padding: 0; 21 width: 9px; 22 height: 9px; 23 border-radius: 10px; 24 cursor: pointer; 25 background:url() 0 0 no-repeat; 26 } 27 #ads>ul>li.focus{ 28 background:url() 0 -9px no-repeat; 29 }
1 ;(function(){ 2 var setting = { 3 $ads:$("#ads"), 4 $adsContent: $("#ads>div>ul>li"),//大广告 5 $arrows: $("#ads>div>div>div"),//切换箭头 6 $markPoints: $("#ads>ul>li"),//小圆点 7 HIDETIME:400,//消失时间 8 SHOWTIME:800,//出现时间 9 INTERVALTIME:4000,//间隔时间 10 animaChoice:0//0代表渐隐渐现，1代表滚动 11 }, 12 currentIndex=0, 13 len = setting.$adsContent.length, 14 _setInterval=setInterval(autoPlay,setting.INTERVALTIME); 15 16 setting.$ads.hover(function(){ 17 setting.$arrows.fadeIn("fast").css("display","inline-block"); 18 },function(){ 19 setting.$arrows.fadeOut("fast"); 20 }); 21 22 //向右切换 23 function autoPlay(){ 24 switchAds(0,false); 25 } 26 27 //点击箭头切换 28 setting.$arrows.each(function(index){ 29 if(index==0){ 30 $(this).on("click",function(){ 31 switchAds(1,true); 32 }); 33 } 34 else{ 35 $(this).on("click",function(){ 36 switchAds(0,true); 37 }); 38 } 39 }) 40 41 //点击小圆点切换 42 setting.$markPoints.each(function(index){ 43 $(this).on("click",function(){ 44 switchAds(2,true,index); 45 }) 46 }) 47 48 //切换 49 function switchAds(clickStatus,beClicked,index){ 50 if(beClicked) setting.$adsContent.stop(false,true); 51 if(!setting.$adsContent.is(":animated")){ 52 if(beClicked) clearInterval(_setInterval); 53 animate(setting.$adsContent.eq(currentIndex),false,setting.animaChoice); 54 switch(clickStatus){ 55 case 0://选择下一张 56 currentIndex++; 57 break; 58 case 1://选择前一张 59 currentIndex--; 60 break; 61 case 2://选择被点击的 62 currentIndex=index; 63 break; 64 default: 65 break; 66 } 67 if(currentIndex==len) currentIndex=0; 68 else if(currentIndex==-1) currentIndex=len-1; 69 //console.log(currentIndex); 70 animate(setting.$adsContent.eq(currentIndex),true,setting.animaChoice); 71 markDot(setting.$markPoints.eq(currentIndex)); 72 if(beClicked) _setInterval=setInterval(autoPlay,setting.INTERVALTIME); 73 } 74 } 75 76 //负责标记小圆点 77 function markDot($target){ 78 $target.addClass("focus").siblings().removeClass("focus"); 79 } 80 81 //负责动画效果 82 function animate($target,show,animaChoice){ 83 switch(animaChoice){ 84 case 0: 85 if(show) $target.fadeIn(setting.SHOWTIME); 86 else $target.fadeOut(setting.SHOWTIME); 87 break; 88 case 1: 89 if(show) ; 90 else ; 91 break; 92 default: 93 break; 94 } 95 } 96 97 })()