Question

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

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

在我的代码中，我尝试将 animate margin-left.fadeOut 语句移动到中，如果btn具有下一个类，则将其替换为{{1} }，.queue(function)，.css(function)和其他几个，但似乎没有任何东西可以工作，我不能把它留在顶线，因为它会影响前面的条件，我想在相反的条件下工作我的下一个按钮就是。

我几十周来一直坚持这一点，并且我一直回到这一点，中途工作。任何人都可以引导我朝着正确的方向前进。我很难过。

这是我到目前为止所拥有的。

.animate(function)

正如我所说的那样，当我点击下一步时，它就像这样工作得很好，但是当我点击上一个时让它做相反的操作会给我带来麻烦。如果这是有道理的，那就是我试图用jQuery做的事情。

<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>

我希望这是有道理的：）

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

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

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

Answer 1

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

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

$(".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了解我是如何做到的。

我希望能回答你的问题。

Answer 2

好的:)我明白了！

因为我的按钮上有两个课程，所以我使用了你的想法将它们拆分为

$('.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）一切都很出色！真棒！

用动画构建一个jQuery Image Slider

2 个答案: