使用动画构建 jQuery 图像滑块

Posted 2023-05-08

技术标签:

【中文标题】使用动画构建 jQuery 图像滑块【英文标题】：Building a jQuery Image Slider with animation 【发布时间】：2013-06-29 08:51:01 【问题描述】：

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

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

在我的代码中，我尝试将我的 animate 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/

【问题讨论】：

如果您发布问题，请确保您的代码是缩进的，并且您添加了一些格式，否则真的很难阅读。这是您的 js 代码的直接副本和过去吗？因为此代码末尾有一个不匹配的);，这将是一个语法错误并会阻止您的代码运行。我在Here is what I have so far. 之后错过了一个换行符，所以没有显示一些 html 代码。我试图更正，但我的编辑被拒绝了；）。所以请自己添加换行符，以便再次显示所有 html 代码，对于我在编辑时的错误感到抱歉。我忘记为按钮添加 btn click 函数和我的变量，并修复了格式以便再次显示 HTML。感谢您帮助格式化我的代码。这是我的第一个问题，并认为所有行都需要缩进四个空格。我的错。这看起来更好。 ;) 【参考方案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 做到这一点的。

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

【讨论】：

感谢您的帮助，但这并不是我想要的。出于几个原因，第一个是循环以错误的方式滑动图像，第二个是我有一个标题与照片一起在同一次点击时以相同的方式运行。我喜欢你的所作所为，并提出了我的问题，所以你可以看到我要去哪里。本质上，我试图让我以前的按钮将图像滑到标题的右侧，将新图像淡入标题左侧并将其滑入标题上方。这是我在尝试反转它时遇到的问题。 jsfiddle.net/jay_dub/naKub【参考方案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），一切都很顺利！惊人的！

【讨论】：

那么你能接受我的答案作为“答案”吗？如果您发布问题并且有人通过选择他们的答案作为“答案”（通过单击答案旁边的绿色按钮）将您引导到“感谢他们”的答案，这是正常的另外，如果您仔细查看我的代码，您会发现我对 3 和 -2 做了同样的事情，但我是软编码而不是硬编码。另外，如果您想更加感谢某人，您可以“投票”他们的回答。通过这样做，您将为他们提供良好的答案而加分，如果您另外接受他们的答案作为“答案”，那么您还将为他们解决问题而加分。例如：我赞成您的回答，这就是您现在有 6 个代表的原因。我希望这能帮助你开始使用 Stack :)

以上是关于使用动画构建 jQuery 图像滑块的主要内容，如果未能解决你的问题，请参考以下文章

尝试构建一个 jQuery 滑块

如何使用 jQuery 自定义动画 <ul> 轮播滑块？

使用 jquery/javascript 停止带有动画的函数

使用jQuery hover() 使元素出现但不触发动画两次

jQuery 动画滑块

使用 jquery 平滑滚动图像