Javascript to achieve image carousel effect _ javascript tips-js tutorial

This article mainly introduces information about how js achieves image carousel effects. For more information, see the examples in this article, the details are as follows:

Run the following code:

The Code is as follows:

The plug-in is written based on jQuery and mainly implements the following functions: automatic playback, mouse hover, left and right arrow Control + Click prohibited

CSS style:

HTML layout (it is best to add a title attribute for tag ):

  <  >  
 
 
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
  
 
 

JS script plug-in:

Script $. extend ({/* image carousel effect: 1. Auto scroll 2. Hover the mouse over 3. Left and Right Control + Click prohibited to call: $. scroll ({box: 'parent container ', scrollbox: 'ul', time: 1500}); */scroll: function (options) {// default var defaults = {box :'. cooperation-box ', // parent container scrollbox :'. cooperation ', // ul container time: 1500 // switching time}; // extended configuration var conf = $. extend ({}, defaults, options); // obtain the number of li var liSize = $ (conf. box ). find ('lil '). size (); // obtain the li width var liWidth = $ (conf. box ). find ('li: first '). width (); // defines the width of ul $ (conf. scrollbox ). width (liWidth * liSize); // right arrow initialization (not vertex) $ (conf. box ). find ('. next '). addClass ('Disabled '); // define a global variable index variable var index = 0; // switch function switchFunc () {index ++; if (index> liSize-5) {// five must be displayed on the top index = liSize-5; // Add the scrolling back to the end, the initial left value is 0 index value is 0 var scrolledLi = $ (conf. box ). find ('li: lt ('+ index +'); $ (conf. scrollbox ). append (scrolledLi); condition (conf.scrollbox).css ('left', 0); index = 0 ;}$ (conf. scrollbox ). stop (true, true ). animate ({'left':-liWidth * index}, 500, function () {$ (conf. box ). find ('. next '). removeClass ('Disabled ');}) ;}// automatically play var autoPlay = setInterval (function () {switchFunc () ;}, conf. time); // hover the mouse over and pause $ (conf. box ). mouseover (function () {clearInterval (autoPlay) ;}); // move the mouse away and continue $ (conf. box ). mouseout (function () {autoPlay = setInterval (function () {switchFunc () ;}, conf. time) ;}); // click the left arrow $ (conf. box ). find ('. prev '). click (function () {index ++; if (index> = liSize-5) {index = liSize-5; $ (this ). addClass ('Disabled ');} $ (conf. scrollbox ). stop (true, true ). animate ({'left':-liWidth * index}, 500, function () {$ (conf. box ). find ('. next '). removeClass ('Disabled ') ;}); // click the right arrow $ (conf. box ). find ('. next '). click (function () {index --; if (index <= 0) {index = 0; $ (this ). addClass ('Disabled ');} $ (conf. scrollbox ). stop (true, true ). animate ({'left':-liWidth * index}, 500, function () {$ (conf. box ). find ('. prev '). removeClass ('Disabled ');}) ;}}}); script

Page call:

《script》  $(function() {    $.scroll({time: 1500});  });《script》

I hope this article will help you learn about javascript programming.