Slideshow code and slideshow code

Slideshow code and slideshow code

I. Key points:

1. When a page is loaded, the images overlap and are stacked together [absolute positioning];

2. The first display is hidden;

3. Set the subscript and set the color of the subscript to move it with the image;

4. Move the mouse over the image. The left and right icons are displayed. Move the mouse away to continue the carousel;

 

II. Implementation Code:

Html code:

1 <! DOCTYPE html> 2 
Css code:
1*{2 padding: 0px; 3 margin: 0px; 4} 5 6. swapImg {7 position: absolute; 8 9} 10. btn {11 position: absolute; 12 height: 90px; 13 width: 60px; 14 background: rgba (0.5, 0,);/* set the background color to black, the transparency is 50% */15 color: # ffffff; 16 text-align: center; 17 line-height: 90px; 18 font-size: 40px; 19 top: 155px; /* Image Height 400/2-45 */20 cursor: pointer; 21/* display: none; */22} 23 24. btnRight {25 left: 840px;/* Image Width 900-Navigation width 60 */26} 27 # tabs {28 position: absolute; 29 top: 370px; 30 margin-left: 350px; 31} 32. tab {33 height: 20px; 34 width: 20px; 35 background: #05e9e2; 36 line-height: 20px; 37 text-align: center; 38 font-size: 10px; 39 float: left; 40 color: # ffffff; 41 margin-right: 10px; 42 border-radius: 100%; 43 cursor: pointer; 44} 45. bg {46 background: #00ff21; 47}
 
Js Code:
1 // <reference path = "_ references. js "/> 2 3 var I = 0; // global variable 4 // define a variable to obtain the carousel process 5 var time; 6 $ (function () 7 {8 // 1. after the page is loaded, find the first object with Class equal to swapImg and show it. Its sibling element is hidden 9 $ (". swapImg "). eq (0 ). show (). siblings (). hide (); 10 showTime (); 11 // when the mouse is placed on the subscript to display the image, move the mouse to continue the carousel 12 $ (". tab "). hover (13 function () 14 {15 // obtain the index of the cursor 16 I = $ (this ). index (); 17 show (); 18 // After the mouse is put up, how can it be stopped? Get the variable, clear the carousel, and pass the variable to 19 clearInterval (time); 20}, function () 21 {22 showTime (); 23 }); 24 25 // requirement 4. Switch to 26 $ (". btnLeft "). click (function () 27 {28 // 1. click 29 clearInterval (time); 30 // after you click it,-131 if (I = 0) 32 {33 I = 6; 34} 35 I --; 36 show (); 37 showTime (); 38}); 39 $ (". btnRight "). click (function () {40 // 1. click to stop the carousel 41 clearInterval (time); 42 // after the point,-143 if (I = 5) {44 I =-1; 45} 46 I ++; 47 show (); 48 showTime (); 49}); 50 51 52}); 53 54 function show () {55 // $ ("# allswapImg "). hover (function () 56 // {57 // $ (". btn "). show (); 58 //}, function () 59 // {60 // $ (". btn "). hide (); 61 //}); 62 // fadeIn (300) fade-in, fadeout (300) fade-out, filter time 0.3s63 $ (". swapImg "). eq (I ). fadeIn (300 ). siblings (). fadeOut (); 64 $ (". tab "). eq (I ). addClass ("bg "). siblings (). removeClass ("bg"); 65} 66 67 function showTime () 68 {69 time = setInterval (function () {70 I ++; 71 if (I = 6) {72 // there are only 6 images, so I cannot exceed 6. If I is equal to 6, we make it equal to the first 73 I = 0; 74} 75 show (); 76}, 3000); 77}