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 })()
