JS Carousel Map code sharing _JAVASCRIPT Skills

We like the JS carousel picture effect, share to everyone.

First, the main points:
1. When the page load, the pictures coincide, stacked together [absolute positioning];
2. First show, other hidden;
3. Set subscript, set the color of the subscript to let it move with the picture;
4. Move the mouse to the picture, show left and right moving icon, mouse move, continue to carousel;

Second, the implementation code:
HTML code:

<! DOCTYPE html>  

CSS code:

* {
 padding:0px;
 margin:0px
}

. swapimg {
 Position:absolute
 
}
. btn {
 position:absolute;
 height:90px;
 width:60px;
 Background:rgba (0,0,0,0.5);/* Set background color to black, transparency to 50%*/
 color: #ffffff;
 Text-align:center;
 line-height:90px;
 font-size:40px;
 top:155px;/* picture height 400/2-45*/
 cursor:pointer;
 /*display:none;*/
}

. btnright {
 left:840px;/* picture width 900-navigation width 60*/
}
#tabs {
 position: absolute;
 top:370px;
 margin-left:350px
}
. tab {
 height:20px;
 width:20px;
 Background: #05e9e2;
 line-height:20px;
 Text-align:center;
 font-size:10px;
 Float:left;
 Color: #ffffff;
 margin-right:10px;
 border-radius:100%;
 Cursor:pointer
}
. BG {
 background: #00ff21;
}

JS Code:

<reference path= "_references.js"/> var i = 0;//global variable//define a variable used to obtain the process of the carousel var time;
 $ (function () {//1. page load, find class equals swapimg first object, let it show that its sibling element hides $ (". Swapimg"). EQ (0). Show (). siblings (). Hide ();
 ShowTime ();
   When the mouse is placed on the subscript to display the picture, move the mouse to continue the carousel $ (". tab"). Hover (function () {//Get the index to the subscript that the current mouse is in i = $ (this). index ();
   Show (); How to stop after the mouse is put up?
  Gets the process of the variable, clears the carousel, and passes the variable into the clearinterval (time);
  }, Function () {showTime ();

 });
  Requirements four, when I click Left and right Toggle $ (". Btnleft"). Click (function () {//1. Stop the carousel before clicking Clearinterval (time);
  After the point, -1 if (i = = 0) {i = 6;
  } i--;
  Show ();
 ShowTime ();
 });
  $ (". Btnright"). Click (function () {//1. Stop the Carousel Clearinterval (time) before clicking;
  After the point, -1 if (i = = 5) {i =-1;
  } i++;
  Show ();
 ShowTime ();
 

});

});
 Function Show () {//$ ("#allswapImg"). Hover (function ()//{//$ ('. Btn '). Show ();
 The function ()//{//$ (". Btn"). Hide ();
 //}); FadeIn (300) Fade in, fadeout (300) Fade out, filter time 0.3s $ (". Swapimg"). EQ (i) fadeIn (+) siblings () FadeouT ();
$ (". tab"). EQ (i). addclass ("BG"). Siblings (). Removeclass ("BG");
  function ShowTime () {time = SetInterval (function () {i++;
  if (i = = 6) {//only 6 pictures, so I can not more than 6, if I equals 6 o'clock, we let it equal to the first i = 0;
 Show ();
}, 3000);

 }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.