輪播圖製做

1.Html結構：

 1 <div id="SlideShowBox">
 2             <!--圖片區開始-->
 3             <div class="SlideShow">
 4                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_1.jpg" alt="" /></a></div>
 5                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_2.jpg" alt="" /></a></div>
 6                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_3.jpg" alt="" /></a></div>
 7                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_4.jpg" alt="" /></a></div>
 8                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_5.jpg" alt="" /></a></div>
 9                 <div class="SlideShow_Img"><a href=""><img src="img/SlideshowImg_6.jpg" alt="" /></a></div>
10             </div>
11             <!--圖片區結束-->
12             
13             <div class="btn btn_left"><</div><div class="btn btn_right">></div>
14             <!--導航條開始-->
15             <div class="tabs">
16                 <div class="tab bg">1</div>
17                 <div class="tab">2</div>
18                 <div class="tab">3</div>
19                 <div class="tab">4</div>
20                 <div class="tab">5</div>
21                 <div class="tab">6</div>
22             </div>
23             <!--導航條結束-->
24         </div>

2.CSS樣式

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 
 6 #SlideShowBox {
 7     width: 790px;
 8     margin: 0 auto;
 9     position: relative;
10     top: 100px;/*position: absolute;*/
11 }
12 
13 #SlideShowBox .SlideShow .SlideShow_Img {
14     position: absolute;
15     
16 }
17 
18 .btn {
19     position: absolute;
20     top: 150px;
21     width: 40px;
22     height: 60px;
23     font-size: 40px;
24     color: #fff;
25     text-align: center;
26     line-height: 60px;
27     display: none;
28     background-color: rgba(0,0,0,0.2);
29 }
30 
31 .btn_right {
32     position: absolute;
33     right: 0;
34 }
35 /*設置導航條樣式開始*/
36 .tabs {
37     position: absolute;
38     left: 300px;
39     top: 290px;
40 }
41 .tab {
42     /*position: absolute;*/
43     float: left;    
44     width: 30px;
45     height: 30px;
46     text-align: center;
47     line-height: 30px;
48     border-radius: 100%;
49     cursor: pointer;
50     margin-right: 10px;
51     background-color: white;
52 }
53 /*設置導航條樣式結束*/
54 .bg {
55     background-color: red;
56 }
57 /*鼠標移到圖片時出現以前隱藏的.btn盒子*/
58 #SlideShowBox:hover .btn {
59     display: block;
60     cursor: pointer;
61 }
62 
63 .btn:hover {
64     background-color: rgba(0,0,0,0.5);
65 }

3.JQ代碼

 1 var i = 0 ;
 2 var timer;
 3 $(function(){
 4     //顯示第一張圖片
 5     $(".SlideShow_Img").eq(0).fadeIn(300).siblings().fadeOut(300);
 6     ShowTime();
 7     //實現鼠標移到導航條時，中止輪播
 8     $(".tab").hover(function(){
 9         //獲取當前鼠標位置的索引,而後賦值給i，在調用show()方法
10         i = $(this).index();
11         Show();
12         //清除輪播
13         clearInterval(timer);
14     },function(){
15         ShowTime();
16     });
17     //實現鼠標移到圖片時，中止輪播
18     $(".SlideShow_Img").hover(function(){
19         //獲取當前鼠標位置的索引,而後賦值給i，在調用show()方法
20         i = $(this).index();
21         Show();
22         //清除輪播
23         clearInterval(timer);
24     },function(){
25         ShowTime();
26     });
27     //左側點擊按鈕
28     $(".btn_left").click(function(){
29         //先中止輪播
30         clearInterval(timer);
31         if(i==0){
32             i = 6;
33         }
34         i--;
35         Show();
36         ShowTime();
37     });
38     //右側點擊按鈕
39     $(".btn_right").click(function(){
40         //先中止輪播
41         clearInterval(timer);
42         if(i==6){
43             i = -1;
44         }
45         i++;
46         Show();
47         ShowTime();
48     });
49 });
50 
51 //建立顯示圖片的Show()方法
52 function Show(){
53     $(".SlideShow_Img").eq(i).fadeIn(300).siblings().fadeOut(300);
54     //輪播圖下導航條的功能：addClass()方法與removClass()方法
55     $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
56 }
57 //建立輪播圖ShowTime()方法
58 function ShowTime(){
59     //實現輪播方法：setInterval(function(){},time);
60     timer = setInterval(function(){
61         i++;
62         if(i==6){
63             i = 0;
64         }
65         Show();
66     },2000);
67 }

4.注意：須要導入jq插件，本案例使用的是：jquery-1.9.1.js

5.學習心得：在學習輪播圖時，我還覺得很複雜，由於看別人的代碼，看不懂。。。主要經過視頻學習。

　　　　　　主要要知道.eq()，.setInterval(),.fadeIn(),.fadeOut()...等方法。