The examples in this article describe the seamless scrolling effect of multiple graphs implemented by jquery. Share to everyone for your reference, specific as follows:
Slider.js
If you want to make an element move, typically this element needs to have the position attribute Absolute/relative $ (function () {var Oul = $ ('. Wrap ul ');
var oulhtml = oul.html ();
Oul.html (oulhtml+oulhtml) var timeid = null;
var Ali = $ ('. Wrap ul Li ');
var aliwidth = ali.eq (0). width ();
var alisize = Ali.size ();
var ulwidth = aliwidth*alisize; Oul.width (Ulwidth);
1600px var speed = 2;
function Slider () {if (speed<0) {if (Oul.css (' left ') ==-ulwidth/2+ ' px ') {oul.css (' left ', 0);
} oul.css (' Left ', ' +=-2px ');
} if (speed>0) {if (Oul.css (' left ') = = ' 0px ') {oul.css (' left ',-ulwidth/2+ ' px ');
} oul.css (' Left ', ' + + ' +speed+ ' px ');
The purpose of the//SetInterval () function is to execute the code in this function every once in a while Timeid = SetInterval (slider,30);
$ ('. Wrap '). MouseOver (function () {//Clearinterval () function is used to clear the timer clearinterval (Timeid);
});
$ ('. Wrap '). Mouseout (function () {Timeid = SetInterval (slider,30);
});
$ ('. Goleft '). Click (function () {speed=-2;
}); $ ('. GoRight '). Click (functiOn () {speed=2;
});
});
The effect chart is as follows:
More interested readers of jquery-related content can view the site topics: "jquery common Plug-ins and Usage summary", "jquery common Classic Effects Summary", "jquery form operation Tips", "jquery operations JSON data tips," " jquery extension Techniques Summary, jquery drag-and-drop effects and tips summary, jquery table (table) Operation tips Summary, "jquery Ajax Usage Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"
I hope this article will help you with the jquery program design.