How to achieve the effect of picture scrolling with jQuery

This article mainly introduces "how to achieve picture scrolling effect in jQuery". In daily operation, I believe many people have doubts about how to achieve picture scrolling 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 of "how to achieve picture scrolling effect in jQuery". Next, please follow the editor to study!

1. Photo rotation:

The principle is as follows:

Suppose there are three pictures, all of which actually exist on the page, but since the size of the visual part set (here the width is mainly considered) is less than or equal to the size of one picture, if you want to see other pictures, the most direct idea is to put the picture that needs to be displayed in the visual area, that is to say, what needs to be changed is the left/right of the whole picture area.

Specific implementation:

> $(function () {var _ index = 0; var time = 0; $(".But span") .click (function () {_ index = $(this). Index (); play (_ index);}); function play (index) {$(".But span") .eq (index) .addClass ('active'). Siblings (' span'). RemoveClass ('active'); $(' left'). Animate ({left:-(_ index*1024)}, 500) } function autoPlay () {time = setInterval (function () {_ index++; if (_ index > 6) {$("left", 0); _ index = 0;} play (_ index);}, 3000);} autoPlay (); $('.prev') .click (function () {if (_ index = 6) {return;} clearInterval (time); play (+ _ index); autoPlay ();});})

two。 Scroll up and down

Here is an example of text scrolling: a timer is used to insert the last li element in ul into the first li element in ul after a certain time interval.

. ul-list li {text-decoration: none; list-style: none } implementation example of positive and negative query of local data A-star pathfinding algorithm node.js querystring.stringify using event delegation to write a simple minesweeping game lazy loading (delayed loading) parsing of XML in JS setInterval (function () {$('.ul-list li:last'). Css ({' height':'0px') 'opacity': "0}) .insertBefore (" .ul-list li:first ") .animate ({' height':'25px', 'opacity':' 1'}, 'slow', function () {$(this) .removeAttr (' style')) ), 3000). At this point, the study on "how to achieve picture scrolling in jQuery" is over. I hope to be able to solve your 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!