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
 });

重要的行是带有'completed'选项的行。每次显示新幻灯片时都会添加一个回调，以便在接下来的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 ..这将在你到达节目结束时修复任何错误。

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

2 个答案:

代码修改

修改