Question

我正在创建一个jQuery幻灯片，我让幻灯片显示效果很好，唯一的问题是，一旦我在页面上有多个幻灯片，当你单击其中一个上的下一个按钮时，另一个幻灯片移动到下一张幻灯片，我也无法弄清楚原因。

编辑：stackoverflow用户建议修复（谢谢）为每个幻灯片添加幻灯片ID，以便每个幻灯片都有一个唯一的选择器。唯一的问题是在WordPress循环中生成幻灯片，我不确定是否有任何方法可以让WordPress为每个人分配一个唯一的ID ......

如果有人能帮我解决这个问题，我们将不胜感激。我在这个jsFiddle上重复了这个问题：http://jsfiddle.net/RsLAA/1/这里是我的代码。

CSS：

.slideshow {
    background-color: #DEDFCC;
    width: 100%;
    height: 320px;
    position: relative;
    }

.slideContainer {
    padding: 10px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    }

.slide {
    width: 60%;
    height: 300px;
    float: left;
    text-align: center;
    background-color: #C9B7B7;
    }

.slideMiddle {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    }

.slideInfo {
    width: 40%;
    height: 80%;
    float: right;
    padding: 10px;
    }

.slideNav {
    width: 100%;
    padding: 10px;
    background-color: #C9B7B7;
    color:  #DEDFCC;
    }

.prevSlide {
    width: 33.3%;
    float: left;
    }

.slideCount {
    width: 33.3%;
    float: left;
    text-align: center;
    font-weight: bold;
    }

.nextSlide {
    width: 33.3%;
    float: right;
    text-align: right;
    }

.slideCredit {
    width: 40%;
    font-style: italic;
    font-size: 12px;
    }

.fix {
    clear: both;
    }

HTML：

<div class="postContainer">
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>

    <?php $slides = types_child_posts('slideshow'); ?>
    <?php if($slides) { ?>
        <div class="slideshow">
            <?php foreach ($slides as $slide) { ?>

              <?php if (get_post_meta($slide->ID, 'wpcf-image', true)) {
                  $image = get_post_meta($slide->ID, 'wpcf-image', true);
                  $caption = get_post_meta($slide->ID, 'wpcf-caption', true);
                  $credit = get_post_meta($slide->ID, 'wpcf-credit', true);
                  ?>

                <div class="slideContainer">
                  <div class="slide">
                    <span class="slideMiddle"></span><img src="<?php echo $image; ?>">
                  </div>
                  <div class="slideInfo">
                    <p class="slideCaption">


  <p><?php the_title(); ?></p>
                  <?php echo $caption; ?>
                </p>
                <p class="slideCredit">
                  <?php echo $credit; ?>
                </p>
              </div> <!--slideInfo end-->
              <div class="fix"></div>
            </div> <!--slideContainer end-->
          <?php } ?> <!--end if each if-->
        <?php } ?> <!--end each-->
    </div><!--slideshow end-->
    <div class="slideNav">
        <div class="prevSlide">
          <i class="fa fa-chevron-left fa-2x"></i>
        </div>
        <div class="slideCount"></div>
        <div class="nextSlide">
          <i class="fa fa-chevron-right fa-2x"></i>
        </div>
        <div class="fix"></div>
    </div>
<?php } ?> <!--end if-->

jQuery的：

$(document).ready(function() {

  $(".slideshow").each(function() {
    var slideshow = $(this);
    var slides = $(slideshow).children().length;
    var n = 1;

    slideshow.children().hide();

    if(n == 1){
        $(".prevSlide").hide();
    }

    slideshow.children(':nth-child(' + n + ')').show();

    $( ".slideCount" ).append(  n + "/" + slides );

    $('.nextSlide').click(function (){
        if(n == 1){
            n++;
            $(".prevSlide").show();
            $(".nextSlide").show();
            slideshow.children().hide();
            slideshow.children(':nth-child(' + n + ')').show();
            $( ".slideCount" ).empty();
            $( ".slideCount" ).append(  n + "/" + slides );
        }else if(n > 1) {
            n++;
            slideshow.children().hide();
            slideshow.children(':nth-child(' + n + ')').show();
            $( ".slideCount" ).empty();
            $( ".slideCount" ).append(  n + "/" + slides );
            if(n == slides){
                $(".prevSlide").show();
                $(".nextSlide").hide();
            }
        }
    });
    $('.prevSlide').click(function (){
        if(n == slides) {
            n--;
            $(".prevSlide").show();
            $(".nextSlide").show();
            slideshow.children().hide();
            slideshow.children(':nth-child(' + n + ')').show();
            $( ".slideCount" ).empty();
            $( ".slideCount" ).append(  n + "/" + slides );
        }else if(n > 1) {
            n--;
            slideshow.children().hide();
            slideshow.children(':nth-child(' + n + ')').show();
            $( ".slideCount" ).empty();
            $( ".slideCount" ).append(  n + "/" + slides );
            if(n == 1){
                $(".prevSlide").hide();
                $(".nextSlide").show();
            }
        }
    });


  }); // each 1 end

}); // ready method end

Answer 1

感谢您发布此类详细问题。从快速查看代码我可以告诉你正在使用类选择器。 jQuery需要告诉你哪个幻灯片的下一个/上一个按钮被点击了。为此，您可以将功能包含在这样的函数中

function addSlideShow(div_id){

$(div_id+".slideshow").each(function(){
 //rest of your function with embedded div id

});

}

addSlideShow（ '＃slideshow1'）;

对于html

<div id="slideshow1" class="slideshow">...

Answer 2

经过一些测试后，我找到了解决问题的方法 Fiddle
这样就不会重命名或更改html标记，唯一改变的是jquery代码和css规则：

.slideContainer {
    //this property
    background-color: #DEDFCC;
    padding: 10px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

对我来说这是一个很好的sloution jquery代码较少，最终结果似乎也一样：

   <script type="text/javascript">
$(document).ready(function() {
    $('.slideCount').each(function(){
        var text='1/'+$(this).parents('div.postContainer').find('.slideContainer').length
        $(this).text(text)
        })

    $('.prevSlide,.nextSlide').show()   

    $('div.nextSlide').click(function (){
        var count=parseInt($(this).siblings('.slideCount').text())
        var slideshow=$(this).parents('div.postContainer').find('.slideshow')
        var slides = $(slideshow).children().length;
        if(count===slides){count=1}else{count++}
        $(this).parents('div.postContainer').find('div.slideContainer:first').appendTo(slideshow) 
        $(this).siblings('.slideCount').text(count+'/'+slides)
    });

    $('.prevSlide').click(function (){
        var count=parseInt($(this).siblings('.slideCount').text().slice(0,-2))
        var slideshow=$(this).parents('div.postContainer').find('.slideshow')
        var slides = $(slideshow).children().length;
        if(count===1){count=slides}else{count--}
        $(this).parents('div.postContainer').find('div.slideContainer:last').prependTo(slideshow) 
        $(this).siblings('.slideCount').text(count+'/'+slides)  
    });
}); // ready method end
</script>

如果您希望Gallery的行为与您的示例完全相同（箭头sx dx在浏览完所有图像后消失）。
观看其他 Fiddle
在这种情况下，css的变化稍微多一些，请查看小提琴页面的CSS部分如果你喜欢这些解决方案，请记得投票给我;）
感谢。

同一页面上的jQuery幻灯片在点击时一起移动

2 个答案: