需要帮助为基本 .fadeIn()/.fadeOut() 滑块制作 jQuery 循环答案

【问题标题】：Need help making jQuery loop for basic .fadeIn()/.fadeOut() slider需要帮助为基本 .fadeIn()/.fadeOut() 滑块制作 jQuery 循环
【发布时间】：2013-07-06 18:17:07
【问题描述】：

我是 jQuery 新手，无法找出循环一组基本轮播/横幅旋转器的代码的正确方法。我已经尝试了几个版本的“for”语句和 .each()，但我无法让它自己工作，所以我正在寻求帮助。

到目前为止，这是我的代码：

$('.next-1').click(function () {
    $('.featured-1').fadeOut(500,function(){
            $('.featured-2').fadeIn(500,function(){
        $('.featured-2').toggleClass("hide");
        });
    });
});
$('.next-2').click(function () {
    $('.featured-2').fadeOut(500,function(){
            $('.featured-3').fadeIn(500,function(){
        $('.featured-3').toggleClass("hide");
        });
    });
});

然后是在滑块中返回的类似代码块：

$('.prev-2').click(function () {
    $('.featured-2').fadeOut(500,function(){
            $('.featured-1').fadeIn(500,function(){
        $('.featured-2').toggleClass("hide");
        });
    });
});
$('.prev-3').click(function () {
    $('.featured-3').fadeOut(500,function(){
            $('.featured-2').fadeIn(500,function(){
        $('.featured-3').toggleClass("hide");
        });
    });
});

这段代码现在确实可以工作，我只是不想输出这么多不必要的代码行，因为我知道我可以循环它。我希望能够循环直到没有更多的“featured-n” div 循环通过（能够循环到开头也很棒！）

这是我用来生成每个“featured-n”div 块的 PHP/HTML：

function home_slider_loop() {

$count = 0;
query_posts ('tag=slider');

if (have_posts()) : while (have_posts()) : the_post();
$count++;
?>

        <div class="featured-post featured-<?php echo $count; if ($count>1) { echo ' hide';}?>">
            <div class="featured-header">
                <a href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>"><h1 class="featured-title"><?php the_title(); ?></h1></a>
                <p class="author">Written by Evan Luzi</p>
            </div>
            <div class="image-wrap">
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('full', array('class' => 'slider-image')); ?></a>
            <div class="slider-nav">
                <div class="featured-prev prev-<?php echo $count; ?>"></div>
                <div class="featured-next next-<?php echo $count; ?>"></div>
            </div><!--End Navigation-->
            </div><!--End Image <?php echo $count; ?>-->
            <div class="featured-footer">
                <?php the_excerpt(); ?>
            <a class="more-link" href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" >Read more</a>
            </div>
        </div><!--End Featured <?php echo $count; ?>-->

<?php 

endwhile;
endif;
}

这是一个静态 HTML 输出的示例（想象一下，随着“featured-n”类的递增，它会迭代多次：

<div class="featured-1">
            <div class="featured-header">
                <a href="http://www.tbabdev.com/?p=27" title="5 Useful Cinematography Apps for iOS You Should Download Today"><h1 class="featured-title">5 Useful Cinematography Apps for iOS You Should Download Today</h1></a>
                <p class="author">Written by Evan Luzi</p>
            </div>
            <div class="image-wrap">
            <a href="http://www.tbabdev.com/?p=27" title="5 Useful Cinematography Apps for iOS You Should Download Today"><img width="1018" height="416" src="http://www.tbabdev.com/wp-content/uploads/2013/07/cinematography-apps-8-hero.jpg" class="slider-image wp-post-image" alt="cinematography-apps-8-hero" /></a>
            <div class="slider-nav">
                <div class="featured-prev prev-1"></div>
                <div class="featured-next next-1"></div>
            </div><!--End Navigation-->
            </div><!--End Image 1-->
            <div class="featured-footer">
                <p>The devices we have in our pockets, the ones that can run these apps, these are the new leathermans. They have everything we need. They eliminate the need to carry paper manuals and enable us to do complex timelapse calculations in a fraction of the time as a paper and pen.</p>
            <a class="more-link" href="http://www.tbabdev.com/?p=27" alt="5 Useful Cinematography Apps for iOS You Should Download Today" >Read more</a>
            </div>
        </div><!--End Featured 1-->

您可以在 http://www.tbabdev.com/ 看到正在运行的代码

提前感谢您的帮助，请善待n00b :)

【问题讨论】：

能否请您显示呈现的 HTML（由您的浏览器看到，而不是 PHP）？而且，“滑块”是指“carousel”（说明我在问什么的链接，而不是作为“答案”本身）？
@DavidThomas 当然可以。编辑上面的帖子以添加呈现的 HTML。是的，我的意思是旋转木马。如果你去tbabdev.com你会看到我在说什么（悬停在大横幅图片上）
只是澄清一下，所以您正在创建一个循环，以便您可以将点击处理程序附加到轮播中的每篇博文？
差不多。是不是太低效了？

标签： javascript jquery ajax loops slider

【解决方案1】：

使用这样的东西：

$('.nav .prev').click(function(){

    activeBlock = $('.featured.active');
    prevBlock = activeBlock.prev('.featured');

    activeBlock.fadeOut('slow',function(){
        prevBlock.fadeIn().addClass('active');
    }).removeClass('active');

});
$('.nav .next').click(function(){

    activeBlock = $('.featured.active');
    nextBlock = activeBlock.next('.featured');

    activeBlock.fadeOut('slow',function(){
        nextBlock.fadeIn().addClass('active');
    }).removeClass('active');

});

HTML

<div class="nav">
   <div class="prev">&nbsp;</div>
   <div class="next">&nbsp;</div>
</div>

<div class="featured-post featured <?php if($count>1) echo 'hide' ?>">

    <div class="featured-header">
        <a href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>"><h1 class="featured-title"><?php the_title(); ?></h1></a>
        <p class="author">Written by Evan Luzi</p>
    </div>

    <div class="image-wrap">
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('full', array('class' => 'slider-image')); ?></a>

    </div>
    <!--End Image <?php echo $count; ?>-->

    <div class="featured-footer">
        <?php the_excerpt(); ?>
        <a class="more-link" href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" >Read more</a>
    </div>
 </div>

【讨论】：

【解决方案2】：

你可以这样做：

$('.featured-next, .featured-prev').click(function () {
    //find out if the clicked element is a prev or next element, extract the last part, will be useful later        
    var direction = $(this).hasClass("featured-next") ? "next" : "prev";

    //select the ".featured-n" block which is the super-parent of clicked element
    var $fullBlock = $(this).closest('div[class^="featured-"]'); //or add a class here to make your life easier

    //fade out full block
    $fullBlock.fadeOut(500, function () {
        //search for the next element and show it
        //note that $fullBlock.next() => $fullBlock["next"]() => $fullBlock[direction]() 
        $fullBlock[direction]().fadeIn(500, function () {
            //toggle the class "hide" of the element next to fullBlock
            $(this).toggleClass("hide");
        });
    });
});

说明：

您可以同时加入prev 和next 活动。
然后，您必须检查它是next 还是prev 元素。将其设置为名为@987654326@ 的变量。当我们尝试 fadeIn featured-n div 时，我们将使用它来确定是否必须使用 prev() 或 next()。
找到将类设置为featured-n 的父级（在您的情况下为父级）。 如果你给所有这些元素一个公共类可能会更好，这样我们就可以停止使用'div[class^="featured-"]'选择器，这有点低效。
淡出父级。
在回调中，根据direction 变量，我们必须决定轮播是转到上一个块还是下一个块，如下所示：
```
 if(direction === "prev")
 {
   $fullBlock.prev().fadeIn(//your code)
 }
 else
 {
   $fullBlock.next().fadeIn(//your code)
 }
```
您还必须知道，在这样的对象中：
```
 var data = {"name" : "Blah Blah"} 
```
为了让“Blah Blah”出来，我们可以说
```
 data.name
```
或者我们可以说：
```
 data["name"]
```
因此基于此，在我们的情况下，而不是
```
 $fullBlock.prev()
```
或者我们可以说
```
$fullBlock["prev"]()
```
direction 变量包含哪些内容。所以最后，我们可以这样做来根据点击的内容选择下一个/上一个元素： $fullBlock方向
显示上一个/下一个元素。
添加/删除“隐藏”类。

希望这有帮助！

【讨论】：