Shulou(Shulou.com)06/01 Report--

This article mainly explains "jquery how to achieve PC end-wheel function", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in-depth, together to study and learn "jquery how to achieve PC end-wheel function" bar!

The effect achieved is:

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

2. Click the left and right button to switch manually.

3. The bottom dot displays the active status according to the position of the switched picture.

4. The mouse passes through the area of the rotation map, stops the rotation, and leaves the rotation map area to start the rotation.

The result of the code directory is as follows:

1. Index.html

Note: here we take five pictures as an example. What the real rotation shows users on the page is five different pictures, but for the continuity of the rotation effect, the fifth picture is added in front of the first picture and the first picture is added after the fifth picture, so there are seven pictures in the demo structure, and the size of each picture must be the same (here the width and height size is 720*350px).

PC-jquery version of broadcast map PC-jquery version of the broadcast map

Picture-5

Picture-1

Picture-2

Picture-3

Picture-4

Picture-5

Picture-1

< >

II. 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 (180degCot rgba), rgba (0memo 01m 0);} .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: 03px;} .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: each variable is commented in the js code. In order to prevent the phenomenon of continuous animation caused by multiple clicks quickly, stop (false,true) is called here every time you switch pictures. But note that when scrolling to the left, after scrolling to the last picture, do not use stop (false,true) when switching again, but instantly locate the position of the first picture (actually the second picture in the dom structure). Similarly, when scrolling to the right, when scrolling to the first picture, you do not need stop (false,true) to switch again. Instead, you need to instantly locate the position of the last image (actually the penultimate picture in the dom structure).

Var interval = 3000; / / rotation interval var arrowL = $('# arrow_l'); / / left arrow var arrowR = $('# arrow_r'); / / right arrow var slideBox = $('# slide'); / / carousel area var innerBox = $('# inner'); / / inner big box var img = innerBox.children ('li'); / / each picture var dot = $(' # dot') / / small dot box var imgW = $(img [0]). OuterWidth (); / / the width of each li tag var imgCount = 5; / / the total number of pictures (the number of different pictures) (there are actually 7 pictures on the dom) var I = 0; / / initialized to the 0th picture timer = null; / / timer / / Auto Carousel timer = setInterval (function () {ipictures +) InnerBox.stop (false, true). Animate ({'left':-i*imgW+'px'}, 300) dot.find (' li'). RemoveClass ('active') .eq (iMur1). AddClass (' active') if (I > imgCount) {innerBox.animate ({'left':-1*imgW+'px'}, 0); dot.find (' li'). RemoveClass ('active'). Eq (0). AddClass (' active') I = 1 }, interval) / / Click the right arrow to play the next arrowR.click (function () {ipright); innerBox.stop (false, true). Animate ({'left':-i*imgW+'px'}, 300) dot.find (' li'). RemoveClass ('active') .eq (iMut 1). AddClass (' active') if (I > imgCount) {innerBox.animate ({'left':-1*imgW+'px'}, 0) Dot.find ('li'). RemoveClass (' active'). Eq (0). AddClass ('active') I = 1;}}) / / Click the left arrow to play the previous arrowL.click (function () {false, true). Animate ({' left':-i*imgW+'px'}, 300) dot.find ('li'). RemoveClass (' active') .eq (iMur1). AddClass ('active') if (I)

< 1){ innerBox.animate({'left':-imgCount*imgW+'px'},0); dot.find('li').removeClass('active').eq(imgCount-1).addClass('active') i = imgCount; }})//鼠标经过轮播图区域时，清除定时器，停止自动轮播slideBox.mouseenter(function () { clearInterval(timer);})//鼠标离开轮播图区域时，重新启动自动轮播slideBox.mouseleave(function () { timer = setInterval(function () { i++; innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300) dot.find('li').removeClass('active').eq(i-1).addClass('active') if(i >

ImgCount) {innerBox.animate ({'left':-1*imgW+'px'}, 0); dot.find (' li'). RemoveClass ('active'). Eq (0). AddClass (' active') I = 1 }}, interval)}) Thank you for your reading. The above is the content of "how to realize the PC end-wheel broadcast function in jquery". After the study of this article, I believe you have a deeper understanding of how jquery realizes the end-wheel broadcast function in PC, and the specific use situation still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.