JQuery-based Automatic Image and text carousel effect plug-in

JQuery-based Automatic Image and text carousel effect plug-in

This example describes the graphic automatic carousel effect plug-in implemented by JQuery. Share it with you for your reference. The details are as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

IntervalID = setInterval (cycleImage, slidetime ); $ (". Main_image. desc"). show (); // display the image $ (". Main_image. block"). animate ({opacity: 0.85}, 1); // sets transparency // Click and hover events $ (". Image_thumb ul li: first"). addClass ('active '); $ (". Image_thumb ul li"). click (function (){ // Set parameters Var imgAlt = $ (this). find ('img '). attr ("alt "); Var imgTitle = $ (this). find ('A'). attr ("href "); Var imgDesc = (this).find('.block'{.html (); // obtain html from class block Var imgDescHeight = $ (". main_image"). find ('. Block'). height (); // Calculate the height of a block. If ($ (this). is (". active") {// if activated, subsequent operations... Return false; } Else { // Animation operation $ (". Main_image. block"). animate ({opacity: 0, marginBottom:-imgDescHeight}, 250, function (){ $ (". Main_image. block" 2.16.html (imgDesc). animate ({opacity: 0.85, marginBottom: "0"}, 250 ); $ (". Main_image img"). attr ({src: imgTitle, alt: imgAlt }); }); } $ (". Image_thumb ul li"). removeClass ('active '); $ (This). addClass ('active '); Return false; }). Hover (function (){ $ (This). addClass ('hover '); }, Function (){ $ (This). removeClass ('hover '); }); // Toggle Teaser $ ("A. collapse"). click (function (){ $ (". Main_image. block"). slideToggle (); $ ("A. collapse"). toggleClass ("show "); });

I hope this article will help you with jQuery programming.