Comunidad de diseño web y desarrollo en internet online

Autoplay para Slider

Citar            
MensajeEscrito el 05 Jul 2012 01:31 am
Muy buenas, me llamo David y llevo bastante leyendo CL aunque este es mi primer post. A lo largo de lo que llevo aprendido me ha servido siempre, la verdad es una de mis webs más visitadas xDD...

A lo que iba,

Mi problema es que entiendo el JavaScript pero no lo programo, por tanto puedo editar pero no crear o añadir... En mi web tengo un slider que funciona bastante bien 'SweetPages' pero me vendría bien incluirle un autoplay para que se iniciase sólo o hiciese un pase de diapositivas... En el link tenéis el código original, os paso el que yo he editado (un poco) para amoldarlo a mi web.

Código :

(function($){

// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){
   
   // If no options were passed, create an empty opts object
   if(!opts) opts = {};
   
   var resultsPerPage = opts.perPage || 3;
   
   // The plugin works best for unordered lists, althugh ols would do just as well:
   var ul = this;
   var li = ul.find('li');
   
   li.each(function(){
      // Calculating the height of each li element, and storing it with the data method:
      var el = $(this);
      el.data('height',el.outerHeight(true));
   });
   
   // Calculating the total number of pages:
   var pagesNumber = Math.ceil(li.length/resultsPerPage);
   
   // If the pages are less than two, do nothing:
   if(pagesNumber<2) return this;

   // Creating the controls div:
   var swControls = $('<div class="swControls">');
   
   for(var i=0;i<pagesNumber;i++)
   {
      // Slice a portion of the lis, and wrap it in a swPage div:
      li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
      
      // Adding a link to the swControls div:
      swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
   }

   ul.append(swControls);
   
   var maxHeight = 0;
   var totalWidth = 0;
   
   var swPage = ul.find('.swPage');
   swPage.each(function(){
      
      // Looping through all the newly created pages:
      
      var elem = $(this);

      var tmpHeight = 0;
      elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

      if(tmpHeight>maxHeight)
         maxHeight = tmpHeight;

      totalWidth+=elem.outerWidth();
      
      elem.css('float','left').width(ul.width());
   });
   
   swPage.wrapAll('<div class="swSlider" />');
   
   // Setting the height of the ul to the height of the tallest page:
   ul.height(maxHeight);
   
   var swSlider = ul.find('.swSlider');
   swSlider.append('<div class="clear" />').width(totalWidth);

   var hyperLinks = ul.find('a.swShowPage');
   
   hyperLinks.click(function(e){
      
      // If one of the control links is clicked, slide the swSlider div 
      // (which contains all the pages) and mark it as active:

      $(this).addClass('active').siblings().removeClass('active');
      
      swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');
      e.preventDefault();
   });
   
   // Mark the first link as active the first time this code runs:
   hyperLinks.eq(0).addClass('active');
   
   // Center the control div:
   swControls.css({
      'left':'93%',
      'margin-left':-swControls.width()/2
   });
   
   return this;
   
}})(jQuery);

$(document).ready(function(){
   /* The following code is executed once the DOM is loaded */
   
   // Calling the jQuery plugin and splitting the
   // #holder UL into pages of 3 LIs each:
   
   $('#holder').sweetPages({perPage:1});
   
   // The default behaviour of the plugin is to insert the 
   // page links in the ul, but we need them in the main container:

   var controls = $('.swControls').detach();
   controls.appendTo('#main');
   
});


Avisadme si necesitáis más código (CSS ó HTML) y mil gracias por adelantado!

Por davi91

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 06 Jul 2012 05:55 pm
T.T

Por davi91

1 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.