JQuery creates a full-screen, fixed-width carousel image, and jquery full-screen

JQuery creates a full-screen, fixed-width carousel image, and jquery full-screen

This is the first record left in the blog garden.

Html section

1 div class = "cm-banner"> 2 <div class = "cm-banner-list"> 3 <ul id = "cm_banner_list"> 4 <! -- The image width and height are set to 1920x300 in css --> 5 <li>  </li> 6 <li>  </li> 7 <li>  </li> 8 <li>  </li> 9 </ul> 10 <ul class = "cm-banner-num" id = "cm_banner_num"> </ul> 11 </div> 12 <div class = "cm- banner-in w "> 13  14  15 </div> 16 </div>

Css Section

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; /* if you do not set the click effect of a small dot in the hierarchy here, it cannot be triggered */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. 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 Section

1 $ (function () {2 // move the cursor to the display arrow button 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 // hover the mouse over the arrow to highlight 19 $ ('. cm-banner-arrow '). hover (function () {20 rows (this).css ('opacity ', '1'); 21}, function () {22 rows (this).css ('opacity', '0. 5 '); 23}); 24 25 // initialize the necessary variable 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 // dynamic addition of small dots 33 for (j = 0; j <cm_length; j ++) {34 $ ('# cm_banner_num '). append ('<li> </li>'); 35} 36 37 // Add a style 38 $ ('# cm_banner_num li') to the first Dot '). first (). addClass ('active'); 39 40 // Add a style to the first image 41 $ ('# cm_banner_list li'assist.first().css ('display', 'block '); 42 43 // click the left arrow to switch to 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 // click the right arrow to switch 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 // switch between 64 $ ('# cm_banner_num li') by clicking the dot '). 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 });