jquery Implementation Picture Carousel effect code _jquery

Organize the previous use of jquery to achieve the image of the carousel effect.

1. Auto-carousel when not doing operation
2. Mouse suspension in the picture, stop Automatic carousel, hidden in the picture around the arrow will show
3. Manual Carousel 1: Mouse pointing at the bottom of the picture button, you can switch the corresponding picture
4. Manual Carousel 2: Click the left and right arrows can also switch pictures

Effect Diagram: (PS: With software capture, not too can get, feel the picture is distorted)

Here is the code area:

**inde.html part of code * *

<div class= "box" > <ul class= "img" > <li class= "photo" ><a href= "#" ></a></li> <li class=" photo "><a href=" # ">< /a></li> <li class= "photo" ><a href= "#" ></a></li > <li class= "photo" ><a href= "#" ></a></li> <li CLA ss= "Photo" ><a href= "#" ></a></li> <li class= "Photo" ><a href= "#" ></a></li> <li class=" photo "><a href = "#" ></a></li> </ul> <div> <span class=" JT "Id=" J Tleft "><</span> <span class=" JT "id=" Jtright ">></span> </div> <div class="

 Numlist "></div> </div>

**RESET.CSS Code * *

. box{
 padding:0;
 width:800px;
 height:500px; 
 margin:0 Auto;
 position:relative;
}
ul.img{
 padding:0;
 margin:0 auto;
}
Ul.img. photo{
 List-style:none;
 Position:absolute; 
 Display:none;
}
img{
 width:800px;
 height:500px
}
. Box. img. active{
 display:block;



jt{
 width:40px;
 height:50px;
 Background-color:rgba (0,0,0,0.5);
 Position:absolute;
 top:50%;
 Margin-top: -25px;
 line-height:50px;
 font-size:30px; 
 Color:white;
 font-weight:800;
 Text-align:center; 
 Display:none;
}
#jtRight {
 right:0;
}


. numlist{
 font-size:0;
 Position:absolute;
 bottom:10px;
 left:50%;
 margin-left:-70px 
}
. Numlist. num{
 background-color:black;
 width:20px;
 height:20px;
 border-radius:50%;
 Color:white;
 Text-align:center;
 font-size:14px;
 Display:inline-block
}
. Numlist. check{
 background-color:red;
}

**main.js Code * *

$ (function () {/* Defines global variables to record the subscript/var i=0 representing the displayed picture;
 * * Add subscript/var size=$ (". Photo") by number of pictures. Size ();
  for (Var j=1;j<=size;j++) {var span=$ ("<span class= ' num ' >" +j+ "</span>");
 $ (". Numlist"). Append (span);
 /* Default to select the first subscript and display the first picture * * * (". Photo:eq (0)"). AddClass ("active");

 $ (". Num:eq (0)"). AddClass ("check"); /* Manual Carousel/var handleimgchange=function () {$ (". Num"). each (function () {$ (this). MouseOver (a function () {$ (this). Siblin
    GS (). Removeclass ("check");

    $ (this). addclass ("check");
    /* Get the selected subscript value/i=$ (this). index ();
    $ (". Photo"). Hide ();
   $ (". Photo"). EQ (i)-Show ();
  });
 });

 };
  /* Display the next picture * * var move=function () {i++;
  if (i>size-1) {i=0;
  $ (". Num"). EQ (i). addclass ("Check"). Siblings (). Removeclass ("check");
 $ (". Photo"). EQ (i)-show (). siblings (). Hide ();

 };
  /* Auto-carousel/var autoimgchange=function () {var t=setinterval (move,1000);
   $ (". Box"). Hover (function () {$ (this). CSS ({"cursor": "Pointer"});
   $ (". JT"). CSS ({"Display": "Block"}); ClearinterVal (t);
   },function () {$ (. jt). CSS ({"Display": "None"});
  T=setinterval (move,1000);

 })
 };
   /* Set LEFT ARROW Click event/var jtl=function () {$ ("#jtLeft"). Click (function () {i--;
   if (i<0) {i=size-1;
   $ (". Num"). EQ (i). addclass ("Check"). Siblings (). Removeclass ("check");
  $ (". Photo"). EQ (i)-show (). siblings (). Hide ();
 })
 };
  var jtr=function () {$ ("#jtRight"). Click (function () {move ();

 })
 };
 Handleimgchange ();
 Autoimgchange ();
 JTR ();
JTL ();

 });

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.