0

我需要我的幻灯片有一个带有下一步按钮的轮播。轮播需要环绕并单击轮播中的每个缩略图需要更改主幻灯片（#slideshow-1）

下一个按钮仅执行一项任务，即浏览 #slideshow-2中的每个缩略图。它目前只有 3 张图片显示，但最终将有 6 张。

开箱即用，来自 malsup 的代码不允许换行，也不允许单击缩略图来更改主幻灯片。它只允许包装或不包装。（没有包装确实允许我单击拇指进行更改）

我引用这个页面：http: //jquery.malsup.com/cycle2/demo/caro-pager.php

下面的代码是我尝试添加单击事件以更改#slideshow-1 中的幻灯片。

此外，看起来幻灯片编号不一样。我在控制台中总共获得 5 个幻灯片编号。如果我能知道如何获得 2 个单独的幻灯片实例，它可能会对我有所帮助。

让我知道是否有任何不清楚的地方。

    $(function(){

    var slideshow = $("#slideshow-1 #cycle-1");

        $('#slideshow-2 .cycle-slide').click(function(){
            var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
                console.log(index);
            slideshow.cycle('goto', index);
        });
});

<!-- Main Slideshow -->
<div id="slideshow-1">
    <div id="cycle-1" class="media_wrapper cycle-slideshow" 
        data-cycle-fx="fade" 
        data-cycle-timeout="0"
        data-cycle-slides="> div.media_slide">
        <!-- Choices -->
        <div class="media_slide">
            <!-- Video Link -->
            <a data-video-url="http://wearedkla.com/NAI/dk_ond_hunkyd_may13.mp4">
                <div class="media_image">
                    <img src="images/slide1_clay.jpg" />
                </div>
            </a>
        </div>

        <!-- Choices -->
        <div class="media_slide">
            <!-- Video Link -->
            <a data-video-url="http://wearedkla.com/NAI/dk_ond_hunkyd_may13.mp4">
                <div class="media_image">
                    <img src="images/slide2_person.jpg" />
                </div>
            </a>
        </div>

        <!-- Choices -->
        <div class="media_slide">
            <!-- Video Link -->
            <a data-video-url="http://wearedkla.com/NAI/dk_ond_hunkyd_may13.mp4">
                <div class="media_image">
                    <img src="images/slide3_persons.jpg" />
                </div>
            </a>
        </div>
        <!-- /slideshow -->

    </div>
</div>

        <!-- Thumbnails -->
    <div id="slideshow-2">      
        <div id="cycle-2" class="thumbs cycle-slideshow" 
            data-cycle-fx="carousel" 
            data-cycle-carousel-vertical="true" 
            data-cycle-timeout="0"
    data-cycle-carousel-visible="3"
    data-cycle-carousel-fluid=true
    data-allow-wrap="true"
            data-cycle-slides="> div"
            data-cycle-next=".cntrl .cycle-next"    
            >

            <div><img class="item set_one" src="images/thum1_clay.jpg" width="209" height="127"/></div>
            <div><img class="item set_two" src="images/thum2_chris.jpg" width="209" height="127"/></div>
            <div><img class="item set_three" src="images/thum3_tom.jpg" width="209" height="127"/></div>

        </div>

        <div class="cntrl">         
       <!-- Remove class 'none' when more slides are added -->
       <a href="#" class="cycle-next">Next &raquo;</a>
    </div>

    </div>

谢谢！

4

2 回答 2

2

通过添加几行 jquery 解决了我的问题。

  • 检查循环轮播是否已经结束，（有类 .disabled）。
  • 转到幻灯片 0（基于 0）并将轮播推回顶部。
  • 确保所有幻灯片都可见。

 

$(".cycle-next").click(function(){
   if ($(".cycle-next").hasClass('disabled')) {

   // Manually go to go the begining of the slideshow
   $(".cycle-slideshow").cycle('goto', 0);
   // Push carousel to first slide
   $(".cycle-carousel").animate({
      top: 0
   },1500);

  $(this).removeClass("disabled");

  $(".cycle-slide").css('opacity','1');
}
});
于 2013-07-03T18:09:49.167 回答
0

Vache，我使用您的代码对“cycle-prev”和“cycle-next”链接进行了轻微修改。出于某种原因，当 cycle-prev 链接触发 .cycle('goto',5) [因为 carousel 中有 6 个元素] 时，插件会暂时添加，然后从 cycle-next 锚点中删除 'disabled' 类. 即使我手动添加该类，它也会立即被删除，从而使“cycle-next”事件处理程序无用。

这是我毫无价值的代码。

            $("a.cycle-next").click(function(){
                if ($("a.cycle-next").hasClass('disabled')) {
                    $(this).removeClass("disabled");
                    $(".slideshow").cycle('goto', 0);
                }
            });

            $("a.cycle-prev").click(function(){
                if ($("a.cycle-prev").hasClass('disabled')) {
                    $("a.cycle-next").addClass("disabled");
                    $(this).removeClass("disabled");
                    $(".slideshow").cycle('goto', 5);
                }
            });

如果以错误的方式发布，请随时给我屎。

于 2014-07-03T23:12:55.290 回答