This example describes the jquery simple custom picture carousel and its usage. Share to everyone for your reference, specific as follows:
Often use other people's plug-ins, now write one, to commemorate.
JQuery.banner.js:
* * Banner 0.1 * Use banner to realize picture timing switch mouse through stop animation * Mouse left, continue animation/function ($) {$.fn.banner =function (options) {//various properties and parameters
Number of Var defaults ={picwidth: "1000", Picheight: "$", Speed: "1500"}; var totalw = 0; Save the total animation width var timer = null; Save Timer var current = 0; Save the current animation to the nth picture, next time from here var totalnum = 0; Save the total number of figures var dsqtime = 0; Define timer Time "Outbound parameter" var dhtime = 0;
Define animation time var count = 0;
Merging multiple objects is a new parameter with a new one, otherwise the default var options = $.extend (defaults, options);
This.each (function () {//implementation code var __this = $ (this);
Dsqtime = Options.speed;
Dhtime = DSQTIME/3;
Initialize init (__this);
Call animated Show (__this, options.picwidth,current);
Mouse over the event __this.find (' ul li '). bind (' MouseOver ', function () {window.clearinterval (timer);//Clear Timer});
__this.find (' ul li '). bind (' Mouseout ', function () {Show (__this, options.picwidth,current);
followed by an animated carousel}); });
Initialization sets the parent container width function init (obj) {obj.find (' ul Li '). each (function () {TOTALW + + $ (this). width ();
totalnum++;
});
Obj.find (' ul '). Width (TOTALW); //Start animation display function show (obj, width, current) {timer = setinterval (function () {obj.find (' ul '). Animate (
{' Margin-left ': '-' +count*width+ ' px '}, dhtime);
current = count;
count++;
if (count = = totalnum) {count = 0;
}}, Dsqtime);
}
};
}) (JQuery);
HTML code:
<!doctype html>
Effect Chart:
For more information on jquery-related content readers can view the site topics: "jquery common Plug-ins and Usage summary", "JQuery Extended Skills Summary", "jquery switching effects and Skills summary", "jquery traversal algorithm and Skills summary", " jquery Common Classic Effects 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
