jquery - 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 初始化:

$('#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.

我希望这是正确的。玩得开心!