Слайд-шоу в jQuery не отвечает на следующую кнопку - PullRequest
Новая
       2

Слайд-шоу в jQuery не отвечает на следующую кнопку

1 голос
/ 01 марта 2011

Я использую это слайд-шоу jQuery http://css -tricks.com / moving-boxes / на моей странице, но проблема в этом слайд-шоу заключается в том, что пока вы не нажмете следующую кнопку, он не будетСледующее изображение, так что есть ли решение для автоматического перемещения этих изображений в слайд-шоу или так же, как это любое другое Спасибо

Код 

$ (function(){
   $ ('#slider-two').movingBoxes ({
    startPanel: 3,    // start with this panel
    width: 600,   // overall width of movingBoxes
    panelWidth: .7,    // current panel width adjusted to 50% of overall width
    imageRatio: 16/9,  // Image ratio set to 16:9
    buildNav: true, // if true, navigation links will be added
    navFormatter: function (index, panel){ return panel.find ('h2 span').text(); }, // function which gets nav text from span inside the panel header
   });

   // Example of how to move the panel from outside the plugin, only works on first selector (Use ID instead of class to target other movingboxes).
   // Get: var currentPanel = $ ('.slider').data ('movingBoxes').currentPanel(); // returns # of currently selected/enlarged panel
   // set: var currentPanel = $ ('.slider').data ('movingBoxes').currentPanel (2); // scrolls to 2nd panel & returns 2.

   // Set up demo external navigation links
   var I, t = ', len = $ ('#slider-one .panel').length + 1;
   for ( I=1; I<len; I+){
    t += '<a href="#" rel="' + I + '">' + I + '</a> ';
   }
   $ ('.dlinks')
    .find ('span').html (t).end()
    .find ('a').click (function(){
     $ ('#slider-one').data ('movingBoxes').currentPanel ( $ (this).attr ('rel'));
     return false;
    });

   // Report events to firebug console
   $ ('.slider').bind ('initialized initChange beforeAnimation completed',function (e, slider, tar){
    // show object ID + event in the firebug console
    if (window.console & window.console.firebug){
     var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel
     txt += (typeof (tar) == 'undefined')? ': ', Targeted panel is ' + tar;
     console.debug ( txt);
    }
   });

  });

Ответы [ 2 ]

3 голосов
/ 01 марта 2011

Для получения информации, полный readme со всеми опциями можно посмотреть здесь: https://github.com/chriscoyier/MovingBoxes

Модификация кода

Попробуйте заменить инициализацию слайдера следующим кодом: 

$('#slider-two').movingBoxes({
    startPanel  : 3,     // start with this panel
    completed: function() {  //function runs after slider completes movement
           setTimeout(function() {
                $("#slider-two").data('movingBoxes').goForward();  // move to next slide.
           }, 5000); // execute the given function after 5 seconds

    },
    wrap        : true,  // restart the slideshow after the end
    width       : 600,   // overall width of movingBoxes
    panelWidth  : .7,    // current panel width adjusted to 50% of overall width
    imageRatio  : 16/9,  // Image ratio set to 16:9
    buildNav    : true, // if true, navigation links will be added
    navFormatter: function(index, panel){ return panel.find('h2 span').text(); }, // function which gets nav text from span inside the panel header
 });

Важными являются строки с опцией «завершено». Добавить функцию обратного вызова, вызываемую каждый раз, когда отображается новый слайд, чтобы изменить его в следующие 5 секунд.

Я также добавил wrap : true, чтобы активировать перенос, это означает, что слайд-шоу будет перезапущено в начале, когда оно достигнет конца.

Теперь вы должны как-то запустить слайд-шоу, чтобы вы могли добавить этот код непосредственно перед финальной } (последней строкой вставленного кода): 

$("#slider-two").data('movingBoxes').goForward();  // move to next slide.

Надеюсь, это правильно. Веселись!

0 голосов
/ 01 марта 2011

Вы захотите создать петлю, которая заставит ваши ящики двигаться.Ваш код может выглядеть следующим образом: 

sleepTime = 5000; //This is the # of milliseconds between slides

$(document).ready(function() {

     $(".slider").movingBoxes({
          wrap: true,
          completed: function() {  //function runs after slider completes movement
               setTimeout(sleepTime); 
               $(".slider").data('movingBoxes').goForward();  //recalls itself.
          }
      });

     $(".slider").data('movingBoxes').goForward();  //Initial Slide
}

Наслаждайтесь

Редактировать

Добавлен перенос: true для инициализации ползунка. Это исправит все ошибки, когда выдойти до конца шоу.

...