Jquery implements the image carousel and jquery implements the image

Jquery implements the image carousel and jquery implements the image

I. Carousel

1. HTML framework

<! DOCTYPE html> 
2. css style

/* Clear the default black spots before the list */* {margin: 0; padding: 0;} img {border: 0;} ol, ul, li {list-style: none ;} body {margin: 50px ;}. wrap {width: 500px;/* height and width of an image */height: 350px; border: 1px solid red; position: relative; /* use the border of the image as the reference position */overflow: hidden;/* Hide the part that exceeds the length, width, and height */}. wrap ul {width: 2000px;/* the row in the list is the width of the four images */position: absolute;/* prevents image overflow */left: 0; top: 0 ;}. wrap ul li {float: left;/* arrange the four pictures horizontally */width: 500px ;}. wrap ol {position: absolute; bottom: 10px; right: 10px ;}. wrap ol li {float: left;/* achieve the purpose of horizontal arrangement */width: 16px; height: 16px; line-height: 16px; text-align: center; /* The font is displayed in the column element. */color: # fff; background: #000; border: 1px solid yellow; margin-right: 3px; /* distance between columns */cursor: pointer ;}. wrap ol li. current {background: # fff; color: #000 ;}. wrap. introduce {width: 400px; height: 30px; line-height: 30px; background: rgba (0, 0, 0, 0.5);/* transparent display; or use "opacity: 0.5; filter: alpha (opacity = 50);" */color: # fff; position: absolute; bottom: 0; left: 0 ;}
3. JS Control

$ (Document ). ready (function () {var oul = $ ('. wrap ul '); // get the row; var ali = $ ('. wrap ul li '); // get the column; var numLi = $ ('. wrap ol li '); // the column for obtaining numbers; var aliWidth = $ ('. wrap ul li '). eq (0 ). width (); // obtain the width of a single image; var _ now = 0; // This counter controls the digital style var _ now2 = 0; // This is the counter var timeId that controls the motion distance of the image; // The timer switch var aimg =$ ('. wrap ul img '); // obtain the img element var op in wrap = $ ('. wrap p') // obtain the p element numLi in wrap. click (function () {// The function triggered by clicking the mouse; var index = $ (this ). index (); // if you click the first image, index = 0; _ now = index; // The index must be synchronized with the clicked index regardless of _ now or _ now2; _ now2 = index; var imgAlt = aimg. eq (_ now ). attr ('alt'); // get the alt value op.html (imgAlt) AT _ now; // display the atl value $ (this ). addClass ('current '). siblings (). removeClass (); // add and delete numeric styles; oul. animate ({'left':-aliWidth * index}, 500); // move the image. The left side of the row element is-500 * index} from the left side of wrap }); function slider () {if (_ now = numLi. size ()-1) {// when you scroll to the fourth image, ali.eq(0).css ({// move the first image to the last one by positioning; 'position ': 'relative ', 'left': oul. width ()}); _ now = 0;} else {_ now ++; // If the fourth image is not reached, _ new + 1 ;} _ now2 ++; // image control counter + 1; numLi. eq (_ now ). addClass ('current '). siblings (). removeClass (); // add and delete numeric styles; var imgAlt = aimg. eq (_ now ). attr ('alt'); // get the alt value op.html (imgAlt) AT _ now; // display the atl value in oul. animate ({'left':-aliWidth * _ now2}, 500, function () {// move the image, the left side of the row element is-500 * now2 if (_ now = 0) {ali.eq(0).css ('position', 'static '); oul.css ('left ', 0); _ now2 = 0;});} timeId = setInterval (slider, 1500); // every 1500 ms, the timer is stopped when the image is automatically switched // click the image with the mouse, stop "auto-switching image". When you leave, continue the timer to switch the image // $ ('. wrap '). mouseover (function (event) {// clearInterval (timeId); //}); // $ ('. wrap '). mouseover (function (event) {// timeId = setInterval (slider, 1500); //}); $ ('. wrap '). hover (function () {clearInterval (timeId) ;}, function () {timeId = setInterval (slider, 1500 );});});
* Important Functions

1. Obtain and display each tag Value

Var imgAlt = aimg. eq (_ now). attr ('alt'); // obtain the alt value op.html (imgAlt) AT _ now. // display the atl Value
2. Change the digital Style

$ (This). addClass ('current'). siblings (). removeClass (); // add and delete numeric styles;
3. Scroll pictures

Oul. animate ({'left':-aliWidth * index}, 500); // move the image. The left side of the row element is 500 * index from the left side of wrap.
* Notes

1. Synchronization

_ Now = index;
// Both _ now and _ now2 must be synchronized with the index when you click it;
// Index may change to 3 after you click the mouse. After you release the mouse, we want _ now to change from 3 to 0, but after setInterval, _ now adds 1, _ now is actually changed from 0 to 1, so you need to synchronize _ now and index;

2. counters

_ Now2 is used to prevent the parent element from setting a blank image in the first image. The digital timer and the image motion control timer are not synchronized.

Var _ now = 0; // This counter that controls the digital style var _ now2 = 0; // This is the counter that controls the motion distance of the image.
3. Remove relative attributes

If (_ now = 0) {ali.eq(0).css ('position', 'static '); // go to the relative attribute oul.css ('left', 0 ); // After relative is completed, the left value of ul is restored to 0; _ now2 = 0;
4. Timing of attribute Removal

Oul. animate ({css attribute settings}, 500, function () where function is the operation after execution within ms;

Oul. animate ({'left':-aliWidth * _ now2}, 500, function () {// move the image, the left side of the row element is from the left side of wrap-500 * now2 // based on a set of css, the property animation if (_ now = 0) {ali.eq(0).css ('position ', 'static '); oul.css ('left', 0); _ now2 = 0; // when _ now is 0, _ now2 should also be restored to 0 ;}});
* Difficulties

First, you must learn to obtain element values;
Secondly, learn about several functions;
Then, the variable can be used flexibly to understand the value of the variable every moment;
Finally, Timer control is the most difficult;
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.