jQuery製作全屏寬度固定高度輪播圖

前端新手自己寫的，練習一下基本功，也是在博客園留下的第一次記錄

html部分

 1 div class="cm-banner">
 2     <div class="cm-banner-list">
 3         <ul id="cm_banner_list">
 4             <!--圖片寬度和高度在css中定為1920x300-->
 5             <li><img src="cm-banner-01.png" /></li>
 6             <li><img src="cm-banner-02.png" /></li>
 7             <li><img src="cm-banner-03.png" /></li>
 8             <li><img src="cm-banner-04.png" /></li>
 9         </ul>
10         <ul class="cm-banner-num" id="cm_banner_num"></ul>
11     </div>
12     <div class="cm-banner-in w">
13         <img src="cm-arrow-left.png" id="cm_prev" class="cm-banner-arrow" />
14         <img src="cm-arrow-right.png" id="cm_next" class="cm-banner-arrow"  />
15     </div>
16 </div>

css部分

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 .cm-banner {
 6     width: 100%;
 7     height: 300px;
 8     overflow: hidden;
 9     cursor: pointer;
10     position: relative;
11 }
12 
13 .cm-banner-in {
14     width: 1100px;
15     height: 300px;
16     position: absolute;
17     top: 0;
18     left: 50%;
19     margin-left: -550px;
20 }
21 
22 #cm_banner_list li{
23     display: none;
24     position: absolute;
25     top: 0;
26     left: 0;
27 }
28 
29 .cm-banner-num {
30     width: 100%;
31     position: absolute;
32     bottom: 0;
33     text-align: center;
34     z-index: 2; /*如果沒有在這裡設置層次小圓點的點擊效果無法觸發*/
35 }
36 
37 .cm-banner-num li{
38     width: 10px;
39     margin: 10px 3px;
40     height: 10px;
41     background-color: #fff;
42     border-radius: 5px;
43     -webkit-border-radius: 5px;
44     display: inline-block;
45     opacity: 0.7;
46 }
47 
48 .cm-banner-num .active {
49     background-color: #3982de;
50 }
51 
52 .cm-banner-arrow {
53     position: absolute;
54     top: 50%;
55     margin-top: -22px;
56     opacity: 0.5;
57     display: none;
58 }
59 
60 #cm_prev {
61     left: 0;
62 }
63 
64 #cm_next {
65     right: 0;
66 }

js部分

 1 $(function(){
 2     //滑鼠移入顯示箭頭按鈕
 3     $('.cm-banner').hover(function(){
 4         $('.cm-banner-arrow').show();
 5         clearInterval(cm_timer);
 6     },function(){
 7         $('.cm-banner-arrow').hide();
 8         cm_timer = setInterval(function(){
 9             i++;
10             if(i > cm_length - 1){
11                 i = 0;
12             }
13             $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
14             cm_toggle(i);
15         },2500);
16     });
17 
18     //滑鼠移入箭頭按鈕高亮
19     $('.cm-banner-arrow').hover(function(){
20         $(this).css('opacity','1');
21     },function(){
22         $(this).css('opacity','0.5');
23     });
24 
25     //初始化必要變數
26     var i = 0;
27     var cm_length = $('#cm_banner_list li').length;
28     var cm_toggle = function(point){
29         $('#cm_banner_num li').eq(point).addClass('active').siblings().removeClass('active');
30     };
31 
32     //動態添加小圓點
33     for(j = 0;j < cm_length;j++){
34         $('#cm_banner_num').append('<li></li>');
35     }
36 
37     //給第一個小圓點添加樣式
38     $('#cm_banner_num li').first().addClass('active');
39 
40     //給第一張圖片添加樣式
41     $('#cm_banner_list li').first().css('display','block');
42 
43     //滑鼠點擊左箭頭切換
44     $('#cm_prev').click(function(){
45         i--;
46         if(i < 0){
47             i = cm_length - 1;
48         }
49         $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
50         cm_toggle(i);
51     });
52 
53     //滑鼠點擊右箭頭切換
54     $('#cm_next').click(function(){
55         i++;
56         if(i > cm_length - 1){
57             i = 0;
58         }
59         $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
60         cm_toggle(i);
61     });
62 
63     //滑鼠點擊圓點切換
64     $('#cm_banner_num li').click(function(){
65         var cm_index = $(this).index();
66         $('#cm_banner_list li').eq(cm_index).fadeIn(800).siblings().fadeOut(800);
67         i = cm_index;
68         cm_toggle(cm_index);
69     });
70 
71     //自動播放
72     cm_timer = setInterval(function(){
73         i++;
74         if(i > cm_length - 1){
75             i = 0;
76         }
77         $('#cm_banner_list li').eq(i).fadeIn(800).siblings().fadeOut(800);
78         cm_toggle(i);
79     },2500);
80 });