jQuery中的幻灯片放映不响应下一个按钮

Question

我在我的页面中使用这个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);
    }
   });

  });

Answer 1

有关信息，可在此处查看包含所有选项的完整自述文件：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.

我希望这是对的。玩得开心 ！

Answer 2

你会想要创建一个循环，让你的盒子移动。您的代码可能如下所示：

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
}

---

请享用

编辑

添加了wrap：true对滑块初始化..这将在你到达节目结束时修复任何错误。