JQuery implements the image carousel effect code, and jquery implements the code

JQuery implements the image carousel effect code, and jquery implements the code

Sort out the image carousel effects previously implemented by jQuery.

1. Automatic carousel when no operation is performed
2. When the mouse is suspended on the image, the automatic carousel is stopped. The arrows hidden on the left and right of the image are displayed.
3. Manual carousel 1: Click the icon at the bottom of the image to switch the corresponding image
4. Manual carousel 2: Click the left and right arrows to switch between images.

(PS: I captured it with software, but I don't know how to figure it out. I feel the image is distorted)

The following is the code area:

** Inde.html 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 class="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="jtLeft"><</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 indicating the displayed image; /* Add subscript by number of images */var size = $ (". photo "). size (); for (var j = 1; j <= size; j ++) {var span = $ ("<span class = 'num'>" + j + "</span>"); $ (". numList "). append (span);}/* The first subscript is selected by default and the first image is displayed */$ (". photo: eq (0 )"). addClass ("active"); $ (". num: eq (0 )"). addClass ("check");/* manual carousel */var HandleImgChange = function () {$ (". num "). each (function () {$ (this ). mouseover (function () {$ (this ). siblings (). removeClass ("check"); $ (this ). addClass ("check");/* obtain the selected value */I = $ (this ). index (); $ (". photo "). hide (); $ (". photo "). eq (I ). show () ;}) ;};};/* shows the next figure */var move = function () {I ++; if (I> size-1) {I = 0 ;}$ (". num "). eq (I ). addClass ("check "). siblings (). removeClass ("check"); $ (". photo "). eq (I ). show (). siblings (). hide () ;};/* Automatic carousel */var AutoImgChange = function () {var t = setInterval (move, 1000); $ (". box "). hover (function () {vertex (this).css ({"cursor": "pointer"}); $ (". jt "detail .css ({" display ":" block "}); clearInterval (t) ;}, function () {$ (". jt "cmd.css ({" display ":" none "}); t = setInterval (move, 1000 );})}; /* set the left and right 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 all the content of this article. I hope it will be helpful for your learning and support for helping customers.