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

This article mainly introduces "how to achieve automatic picture rotation effect in jquery". In daily operation, I believe many people have doubts about how to achieve automatic picture rotation effect in jquery. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve automatic picture rotation effect by jquery". Next, please follow the editor to study!

The effect picture is as follows:

The HTML code is as follows:

one

two

three

four

five

eleven

twenty-two

thirty-three

forty-four

fifty-five

Jquery to achieve the effect of automatic seamless rotation of images. The steps and codes are as follows:

Step 1: introduce the jquery file with the following code:

Step 2: create two functions to control the movement of the image to the left and right-- moveRight () and moveLeft (). The code is as follows:

/ / right shift function function moveRight () {var left=$ ('# scroll_pic'). Position (). Left; / / gets the offset of the element relative to the left end $('# scroll_pic'). Animate ({"left": "+ =" + oLiWidth+ "px"}, 800) / function occurs horizontal offset} / / left shift function function moveLeft () {var left=$ ('# scroll_pic'). Position (). Left each time the matching element is called Animate ({"left": "- =" + oLiWidth+ "px"}, 800);}

Step 3: complete the binding of the corresponding event to achieve the basic manual playback effect. The code is as follows:

/ / event binding $('.left') .on ('click',moveRight); $(' .right') .on ('click',moveLeft)

Step 4: realize the manual broadcast effect, that is, add conditional judgment to the above two offset functions [moveRight () and moveLeft ()] respectively. The code is as follows:

/ / move the function function moveRight () {$('left'). Off ('click'); / / remove the click event var left=$ (' # scroll_pic'). Position (). Left; / / rotation condition control statement if (left==0) {$('# scroll_pic'). Css ('left',-oLiWidth*oLi+'px') } $('# scroll_pic'). Animate ({"left": "+ =" + oLiWidth+ "px"}, 800 var left=$ function () {$('left'). On ('click',moveRight); / / end of animation, rebind click event})} / / left shift function function moveLeft () {$(' .right'). Off ('click'); var left=$ (' # scroll_pic'). Position (). Left If (left==-oLiWidth*oLi) {$('# scroll_pic'). Css ('left',0);} $(' # scroll_pic'). Animate ({"left": "- =" + oLiWidth+ "px"}, 800 Magi function () {$('.right'). On ('click',moveLeft);})}

Step 5: realize the effect of automatic picture rotation, that is, add a timer. The code is as follows:

/ / timer function autoRun () {return setInterval (moveLeft,2000);} var timer=autoRun (); / / call timer

Step 6: add mouse movement in and out events for the outermost container to achieve the effect of manually pausing automatic rotation. The code is as follows:

$('# container') .hover (function () {clearInterval (timer);}, function () {timer=autoRun ();}) at this point, the study on "how to achieve automatic rotation of pictures by jquery" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.