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

Many novices are not very clear about what the principle of jQuery breathing round map making is. In order to help you solve this problem, the following editor will explain it in detail. People with this need can come and learn. I hope you can get something.

Broadcast picture: carousel

Breathing wheel broadcast picture variant layout key: all the pictures are stacked together.

Jquery has a very good ability to select elements, but we are used to saving the elements we use to variables in advance. Usually we use id to select elements. Usually we use $box.

Left and right button anti-rogue strategy: when the picture is moving, do nothing. Is ()

Dot's anti-rogue strategy: respond to new events immediately. Stop (true)

Note: change the picture when using the code, and need to introduce the jquery library.

For example:

Document * {margin: 0; padding: 0;} ul, ol {list-style: none;} # carousel {position: relative; width: 900px; height: 540px; border: 1px solid # 000; margin: 50px auto;} / * the key to the layout of respiratory rotation is that all the pictures fall together * / # carousel. Imgs ul li {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display none: } # carousel .imgs ul li:first-child {display: block;} .btns a {position: absolute; width: 30px; height: 60px; top: 50%; margin-top:-30px; text-decoration: none; background-color: rgba (0,0,0, .5); line-height: 60px; text-align: center; font-size: 20px; color: # fff;} .btns a:first-child {left: 10px } .btns a:last-child {right: 10px;} # carousel .circles {position: absolute; width: 200px; height: 20px; left: 50%; margin-left:-100px; bottom: 30px;} # carousel .circles ol {width: 210px;} # carousel .circles ol li {float: left; width: 20px; height: 20px; margin-right: 10px; background-color: blue; line-height: 20px; text-align: center Border-radius: 20px;} # carousel. Circles ol li.cur {background-color: orange;}

1 2 3 4 5 6 7 / get element var $leftBtn = $("# leftBtn"); var $rightBtn = $("# rightBtn"); var $imgs = $("# imgs ul li"); var $circles = $("# circles ol li"); var $carousel = $("# carousel"); / / define length var length = $imgs.length; / / define semaphore var idx = 0; / start timer var timer = setInterval (change, 2000) / / move the mouse into the stop timer $carousel.mouseenter (function () {/ / clear timer clearInterval (timer);}) / / start the timer again from the mouse away $carousel.mouseleave (function () {/ / close the table first clearInterval (timer); / / re-assign timer timer = setInterval (change, 2000);}) / / right button event $rightBtn.click (change) Function change () {/ / Anti-rogue if ($imgs.is (": animated")) {return;} / / current picture disappears $imgs.eq (idx) .fadeOut (600); / / semaphore change idx++; / / Boundary decision if (idx > length-1) {idx = 0;} / / the next image fades into $imgs.eq (idx) .fadeIn (600) / / add cur $circles.eq (idx) .addClass ("cur"). Siblings (). RemoveClass ("cur");} / / left button event $leftBtn.click (function () {/ / Anti-rogue if (! $imgs.is (": animated")) {/ / the current picture disappears $imgs.eq (idx) .fadeOut (600); / / semaphore change idx-- / / Boundary decision if (idx < 0) {idx = length-1;} / / the next image fades into $imgs.eq (idx) .fadeIn (600); / / the current dot plus cur $circles.eq (idx) .addClass ("cur"). Siblings (). RemoveClass ("cur") }}) / / Dot event $circles.mouseenter (function () {/ / the current picture disappears $imgs.eq (idx) .stop (true) .fadeOut (600); / / change the semaphore idx = $(this). Index (); / / the next picture appears $imgs.eq (idx) .stop (true) .fadeIn (600) / / the current dot plus cur $(this) .addClass ("cur"). Siblings (). RemoveClass ("cur");}) is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.