使用动画构建jQuery图像滑块

所以我对jQuery有些陌生，但我有几个月的经验。我的问题是这样的。

我构建了一个图像滑块，它在div中循环，并在单击"下一步"按钮时为照片设置"从右向左滑动"的动画。然而，我的问题是，当我单击上一个按钮时，将其更改为"从左向右滑动"。

在我的代码中，我尝试将animate margin left.fadeOut语句移到中，如果btn有class next条件，并将其替换为.queue(function)、.css(function)、.animate(function)和其他一些，但似乎什么都不起作用，我不能将其保留在最上面一行，因为它会影响我想在下一个按钮运行的相反方向上运行的上一个条件。

几个星期以来，我一直被困在这个问题上，我不断回到这个半途而废的地步。谁能引导我朝正确的方向走吗。我被难住了。

这是我迄今为止所拥有的。

<body>
    <section class="photos">
        <div class="slider">
            <div class="photo">
                <img src="images/photoOne.png">
            </div>
            <div class="photo hidden">
                <img src="images/photoTwo.png">
            </div>
            <div class="photo hidden">
                <img src="images/photoThree.png">
            </div>
        </div> 

    <div class="buttons">
        <a href="#" class="btn prev">Previous</a>
        <a href="#" class="btn next">Next</a>
    </div>
</section>
</body>
<script src="jquery-1.9.1.js"></script>
<script>
var activePhoto = 0;
$('.btn').click(function() {
var $btn = $(this);
$photoBox.eq(activePhoto).animate({ 
"margin-left": "-=744px"}, "fast").fadeOut(function () {
    if ($btn.hasClass('next')) {
        if (activePhoto == $photoBox.length - 1) {
            activePhoto = 0;
        } else {
            activePhoto++;
        }
        $photoBox.eq(activePhoto - 1).css({
            "margin-left": "+=744px"
        });
        $photoBox.eq(activePhoto).css({
            "margin-left": "+=744px"
        });
        $photoBox.eq(activePhoto).fadeIn().animate({
            "margin-left": "-=744px"
        }, "fast");
    } else if ($btn.hasClass('prev')) {
        if (activePhoto == 0) {
            activePhoto = $photoBox.length - 1;
        } else {
            activePhoto--;
        }
    }
});
});
</script>

正如我所说，当我点击下一个时，它可以像这样工作，但当我点击上一个时让它做相反的事情会给我带来问题。如果这有意义的话，这就是我试图用jQuery做的事情。

<script>
var activePhoto = 0;
$('.btn').click(function() {
var $btn = $(this);
$photoBox.eq(activePhoto).queue(function () {
    if ($btn.hasClass('next')) {
        if (activePhoto == $photoBox.length - 1) {
            activePhoto = 0;
        } else {
            activePhoto++;
        }
        $photoBox.eq(activePhoto - 1).animate({
           "margin-left": "-=744px"}, "fast").fadeOut();
        $photoBox.eq(activePhoto - 1).css({"margin-left": "+=744px"});
        $photoBox.eq(activePhoto).css({"margin-left": "+=744px"});
        $photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "-=744px"}, "fast");
    } else if ($btn.hasClass('prev')) {
        if (activePhoto == 0) {
            activePhoto = $photoBox.length - 1;
        } else {
            activePhoto--;
        }
        $photoBox.eq(activePhoto + 1).animate({"margin-left": "+=744px"}, "fast").fadeOut();
        $photoBox.eq(activePhoto + 1).css({"margin-left": "-=744px"});
        $photoBox.eq(activePhoto).css({"margin-left": "-=744px"});
        $photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "+=744px"}, "fast");
    }
});
});
</script>

我希望这是有道理的：）

下面是我举的两个例子。也许这能说明我的问题。第一个是它目前如何使用下一个按钮和从右向左滑动的图像。第二个是我试图做的，与前一个按钮的动画相反，图像滑到标题的右侧，随后的图像在标题的左侧逐渐消失，然后滑到标题上方。在第二个示例中，上一个按钮和下一个按钮都不能正常工作。

http://jsfiddle.net/jay_dub/dtdZc/

http://jsfiddle.net/jay_dub/naKub/

好吧，我基本上花了一个小时为你准备这个，所以我希望你能感激：）

如果你点击上一个：，你想做的是向后做完全相同的事情

$(".btn_next").click(function()
   {
             $(".slider").animate({
            "margin-left": "+=-100px"
            }, "fast"); 
   });
$(".btn_prev").click(function()
   {
             $(".slider").animate({
            "margin-left": "+=100px"
            }, "fast"); 
           current--;
   });

但是如何实现呢？

好吧，我为你准备了一个活生生的例子：http://jsfiddle.net/qPPL8/5/

试着确切地理解我在那里做什么以及为什么它有效

如果您这样做，您可以对代码使用完全相同的方法。

注意：我对代码进行了一些增强，以包含可能"照片用完"的事实。你可以看到我是如何在JsFiddle中使用if statements做到这一点的。

我希望这能回答你的问题。

好的：）我明白了！

由于我的按钮上有两个类，我采用了你的想法，将它们拆分为

$('.next').click(function() {
  var $btn = $(this); 
  var $photoBox = $('.slider').find('.photo');
$photoBox.eq(activePhoto).animate({"margin-left": "-=744px"}, "fast").fadeOut(function() {

带有条件语句的前半部分和

$('.prev').click(function() {
  var $btn = $(this); 
  var $photoBox = $('.slider').find('.photo');
$photoBox.eq(activePhoto).animate({"margin-left": "+=744px"}, "fast").fadeOut(function() {

条件语句的后半部分几乎有效，但上一个按钮的数学运算仍然不正确，没有重新设置正确的照片，所以我需要比照片总数少减一张（即3张照片，所以-2张），一切都很顺利！令人惊叹的

相关内容

最新更新

热门标签：