1

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

我构建了一个图像滑块，当我单击 NEXT 按钮时，它会循环div播放并动画“从右向左滑动”的照片。但是，当我单击上一个按钮时，我的问题是将其更改为“从左向右滑动”。

在我的代码中，我尝试将我的动画 margin-left.fadeOut语句移动到if btn has 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>

我希望这是有道理的 ：）

这是我的示例中的两个 jsfiddles。也许这会为你说明我的问题。第一个是它当前如何使用下一个按钮和从右向左滑动的图像。第二个是我正在尝试做的，与前一个按钮的动画相反，图像滑出到标题的右侧，随后的图像在标题的左侧淡入，然后滑入标题上方。在第二个示例中，上一个按钮和下一个按钮都不能正常工作。

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

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

4

2 回答 2

2

好吧，我基本上花了一个小时为你准备这个，所以我希望你能欣赏它:)

如果单击上一个，您要做的是向后执行完全相同的操作：

$(".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/

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

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

注意：我稍微增强了代码以包含可能“用完照片”的事实。你可以看到我是如何做到的if statements你可以在 JsFiddle

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

于 2013-07-02T18:05:39.713 回答
0

好，我知道了！

由于我的按钮上有两个类，因此我使用了您将它们分开的想法

$('.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) 一切都很顺利！惊人的！

于 2013-07-03T06:23:57.173 回答