2

我是 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 :)

4

2 回答 2

0

使用这样的东西：

$('.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>
于 2013-07-06T18:33:11.753 回答
0

你可以这样做：

$('.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事件一起加入。
  • 然后，您必须检查它是 anext还是prev元素。将其设置为一个名为direction. 我们将使用它来确定是否必须使用prev()或next()何时尝试使用fadeIn featured-ndiv。
  • 找到类设置为的父级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变量包含的内容。所以最后，我们可以这样做来根据点击的内容选择下一个/上一个元素：$fullBlockdirection

  • 显示上一个/下一个元素。

  • 添加/删除“隐藏”类。

希望这有帮助！

于 2013-07-06T18:47:04.967 回答