1

我一直在为一个自动滚动浏览多个产品的网站创建幻灯片。我需要它来自动滚动并在单击按钮时移动到下一个产品。

最初我通过点击事件创建了它，然后自动如下所示，但似乎无法让它同时实现。

我是 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();
   });
});
4

2 回答 2

0

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

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

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

于 2013-07-26T21:41:34.667 回答
0

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

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

碰巧的是，客户在做了一点动画之后改变了他们的样子，所以我最初在我的问题中要求的很多东西都改变了。

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

于 2013-08-11T22:29:51.493 回答