Jquery writes a PC-side carousel image instance, jquerypc

Jquery writes a PC-side carousel image instance, jquerypc

Recently, other projects are not very busy. They are arranged to create a new page for the company's official website project (which has never been touched by the company's official website project before). Here is a place where carousel images are used, at first, I wanted to directly use swiper. the js plug-in can be implemented, but swiper has not been introduced in the official website project. js. I thought about it later, so I won't introduce it, so I don't have to add a network request in turn. Since jQuery is already used in the project, I just want to write a carousel image with jQuery.

Now let's take out the self-written carousel Image Code separately and write a small demo here to record it (images of carousel images in the demo are randomly searched online)

Implementation results:

1. Automatic carousel (the carousel interval is customized in js Code)

2. click the button on the left and right to implement manual switch.

3. The small dots at the bottom display the active status based on the positions of the switched images.

4. Move the mouse over the carousel area, stop the carousel, and start the carousel in the carousel area.

The Code directory result is as follows:

Yishu index.html

Note: here we use five images as an example. The actual carousel shows five different images to users. However, to ensure the consistency of the carousel effect, therefore, add the fifth image before the first image and the first image after the fifth image. Therefore, the demo structure contains seven images, the size of each image must be the same (here, the width and height are 720 * 350px ).

<! DOCTYPE html> 
、Style.css
* { margin: 0; padding: 0; box-sizing: border-box;}.layout { width: 1000px; margin: 30px auto;}ul,ol,li { list-style: none;}.slide { position: relative; width: 900px; margin:auto;}.slide .outer { position: relative; margin: 30px auto; width: 720px; height: 400px; overflow: hidden;}.slide .outer .inner { width: 5040px; height: 350px; position: absolute; left: -720px; top: 0;}.slide .outer .inner li { float: left; height: 350px;}.slide .outer .inner li a { display: block; position: relative; width: 100%; height: 100%;}.slide .outer .inner li a p { position: absolute; left: 0; bottom: 0; color: #fff; font-size: 18px; width: 720px; height: 80px; line-height: 80px; padding-left: 50px; background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.5));}.slide .outer .dot { margin-top: 365px; text-align: center;}.slide .outer .dot li { height: 6px; width: 6px; border-radius: 3px; background-color: #d2cbcb; display: inline-block; margin: 0 3px;}.slide .outer .dot li.active { background-color: #6e5ca5;}.slide .arrow-box { position: absolute; width: 900px; height: 60px; top: 150px; left: 0;}.slide .arrow-box .arrow { width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 30px; background-color: #dde2e6; font-size: 60px; color: #999; cursor: pointer;}.slide .arrow-box .arrow.arrow-l { float: left;}.slide .arrow-box .arrow.arrow-r { float: right;}
Iii. index. js

Note: In js Code, each variable has been annotated. In order to prevent repeated clicks without stopping the animation, stop (false, true) is called each time an image is switched ). However, when you scroll to the left, do not use stop (false, true) When you scroll to the last image ), instead, you need to instantly locate the first image (in fact, the second image in the dom structure). Similarly, when you scroll to the right side, when you scroll to the first image, when switching again, you don't need to stop (false, true). Instead, you need to instantly locate the last image (actually the last one in the dom structure.
Var interval = 3000; // specifies the carousel interval var arrowL = $ ('# arrow_l'); // The left arrow var arrowR = $ ('# arrow_r '); // The right arrow var slideBox =$ ('# slide'); // var innerBox =$ (' # inner ') in the carousel image area '); // large inner box var img = innerBox. children ('lil'); // var dot =$ ('# dot') for each image; // var imgW =$ (img [0]) for the small dot box. outerWidth (); // The width of each li tag var imgCount = 5; // The total number of images (the number of images varies) (there are 7 Actual dom images) var I = 0; // initialize to 0th images timer = null; // timer // automatic carousel timer = setInterval (function () {I ++; innerBox. stop (false, true ). animate ({'left':-I * imgW + 'px'}, 300) dot. find ('lil '). removeClass ('active '). eq (I-1 ). addClass ('active') if (I> imgCount) {innerBox. animate ({'left':-1 * imgW + 'px '}, 0); dot. find ('lil '). removeClass ('active '). eq (0 ). addClass ('active') I = 1 ;}}, interval) // click the right arrow to play the next arrowR. click (function () {I ++; innerBox. stop (false, true ). animate ({'left':-I * imgW + 'px'}, 300) dot. find ('lil '). removeClass ('active '). eq (I-1 ). addClass ('active') if (I> imgCount) {innerBox. animate ({'left':-1 * imgW + 'px '}, 0); dot. find ('lil '). removeClass ('active '). eq (0 ). addClass ('active') I = 1 ;}}) // click the arrow on the left to play the previous arrowL. click (function () {I --; innerBox. stop (false, true ). animate ({'left':-I * imgW + 'px'}, 300) dot. find ('lil '). removeClass ('active '). eq (I-1 ). addClass ('active') if (I <1) {innerBox. animate ({'left':-imgCount * imgW + 'px'}, 0); dot. find ('lil '). removeClass ('active '). eq (imgCount-1 ). addClass ('active') I = imgCount ;}}) // when the mouse passes through the carousel area, clear the timer and stop automatic carousel slideBox. mouseenter (function () {clearInterval (timer) ;}) // when the mouse leaves the carousel area, restart automatic carousel slideBox. mouseleave (function () {timer = setInterval (function () {I ++; innerBox. stop (false, true ). animate ({'left':-I * imgW + 'px'}, 300) dot. find ('lil '). removeClass ('active '). eq (I-1 ). addClass ('active') if (I> imgCount) {innerBox. animate ({'left':-1 * imgW + 'px '}, 0); dot. find ('lil '). removeClass ('active '). eq (0 ). addClass ('active') I = 1 ;}}, interval )})
Iv. Presentation