Question

我一直在为自动滚动浏览多个产品的网站创建幻灯片。我需要这个以自动滚动，当点击一个按钮时，移动到下一个产品。

最初我通过点击事件创建了这个，然后自动如下所示，但似乎无法做到这两点。

我是jQuery的新手，所以任何帮助都非常感激，我想我可能需要重写它才能让它做我需要的。

我想也许我可以在点击事件中调用相同的函数，但这似乎创建了该产品的另一个实例，并为其设置了动画。

这就是我所拥有的：

$(document).ready(function() {
homeslide_1();
});

function homeslide_1() {
$('.homeproducticon').delay(5000).animate({ 
//animates an icon fro, 259px to 1px to emulate page turn
width: '1px',
height: '153px'
}, 1000, function() {
  // Animation complete.
  $('.homeproducticon').fadeOut().hide(); //fade out the icon
  $('.product1').fadeOut().hide(); //fade out and hide the container for product1
  $('.product2').fadeIn().css('display', 'inline-block'); //fade in and display the 2nd container 
  $('.homeheader').css('background-image', 'url(img/homeheaderbackgrd2.png)'); //changes background image
  $('.homeproducticon2').css({ //displays the 2nd product icon
    'display': 'inline-block',
    'width': '1px',
    'height': '153px'
  }).animate({ //animates the page turn effect 
  width: '259px',
  height: '153px'
  }, 1000);
    homeslide_2(); //moves on to the next slide
});
};

function homeslide_2() {
$('.homeproducticon2').delay(5000).animate({ 
      width: '1px',
      height: '153px'
      }, 1000, function() {
        // Animation complete.
        $('.homeproducticon2').fadeOut().hide(); 
        $('.product2').fadeOut().hide();
        $('.product3').fadeIn().css('display', 'inline-block');
        $('.homeheader').css('background-image', 'url(img/homeheaderbackgrd3.png)');
        $('.homeproducticon3').css({
          'display': 'inline-block',
          "width": "1px",
          "height": "153px"
        }).animate({ 
        width: '259px',
        height: '153px'
        }, 1000);
    homeslide_3();
});
};


function homeslide_3() {
$('.homeproducticon3').delay(5000).animate({ 
                width: '1px',
                height: '153px'
                }, 1000, function() {
                  // Animation complete.
                  $('.homeproducticon3').fadeOut().hide(); 
                  $('.product3').fadeOut().hide();
                  $('.product1').fadeIn().css('display', 'inline-block');
                  $('.homeheader').css('background-image', 'url(img/homeheaderbackgrd.png)');
                  $('.homeproducticon').css({
                    'display': 'inline-block',
                    "width": "1px",
                    "height": "153px"
                  }).animate({ 
                  width: '259px',
                  height: '153px'
                  }, 1000);
    homeslide_1();
});
};

感谢您的帮助！乔纳森

编辑：根据Zeaklous的提问：

我很确定它不起作用，这就是为什么我没有包含它，但这是我尝试将两者结合起来：

//home product changer1
//home-arrow1 click
$(document).ready(function(){
     "use strict";
    $('.home-arrow1').click(function(){ 
    homeslide_1();
   });
});

//home product changer2
//home-arrow1 click
$(document).ready(function(){
     "use strict";
    $('.home-arrow2').click(function(){ 
    homeslide_2();
   });
});
//home product changer3
//home-arrow1 click
$(document).ready(function(){
     "use strict";
    $('.home-arrow3').click(function(){ 
    homeslide_3();
   });
});

Answer 1

我认为你已经接近做你想做的事了。我认为要完成您的工作，您需要为点击事件处理添加额外的复杂性：您需要对抗自动动画。这可能需要jquery .stop（）方法http://api.jquery.com/stop/，如果用户多次点击，这也有助于防止不需要的动画重叠。

有关讨论将stop方法与动画一起使用的有用文章，请查看：http://css-tricks.com/full-jquery-animations/

对不起，这不是一个全面的答案，但希望它有所帮助。

Answer 2

感谢大家提出的任何建议。

我目前的解决方案是使用和自定义http://ekallevig.com/jshowoff/，因为它有幻灯片动画并允许在幻灯片中使用html（不仅仅是像某些图像）

当发生这种情况时，客户在改变了一些动画后改变了它们的内容，因此我在问题中最初需要的很多内容都发生了变化。

如果我回到我的代码并找到完整的解决方案，我会在这里发布。

jQuery单击中断动画

2 个答案: