如何通过幻灯片查看活动箭头（下一个/上一个）？答案

【问题标题】：How to view active arrow (next / previous) by slides?如何通过幻灯片查看活动箭头（下一个/上一个）？
【发布时间】：2015-03-08 14:24:09
【问题描述】：

我的网站上有一个非常简单的幻灯片，我使用了一个很棒的幻灯片插件 - cycle plugin。我的问题是箭头（下一个，上一个）。我想只激活箭头，然后是另一张幻灯片。

如果我有三张幻灯片。当第一张幻灯片显示活动按钮时，下一个活动按钮。当您查看时，第二个显示为活动的下一个和上一个。当您查看第三张幻灯片时，仅显示为活动的上一张。

示例：

3 张幻灯片：
- 第一张幻灯片 - 仅按钮下一张显示
- 第二张幻灯片 - prev 和 next 按钮显示
- 第三张幻灯片 - 仅按钮 prev 显示

活生生的例子：

Live demo on my website
Testing example on jsfiddle

jQuery：

$('.slideshow > ul')
  .before('<div class="wrapper"><div class="content"><div class="slide-nav">') 
  .cycle({ 
       fx:     'scrollLeft', 
       speed:  '600', 
       timeout: 4000, 
       pager:  '.slide-nav',
       next:   '#next', 
       prev:   '#prev'
});

HTML：

<div id="slideshow">
    <div class="slideshow">
        <div class="wrapper">
            <div class="content">
                <div class="slide-ntx-prv">
                    <a id="prev" href=""><span class="fa fa-chevron-left"></span></a>
                    <a id="next" href=""><span class="fa fa-chevron-right"></span></a>
                </div>
            </div><!-- /.content -->
        </div><!-- /.wrapper -->
        <ul>
            <li class="slide1">
                <div class="wrapper">
                    <div class="content">
                        <div>cena/noc od <span class="green-bold">67 EUR</span></div>
                        <h2>Vysoké tatry<span>876 apartmánů</span></h2>
                    </div><!-- /.content -->
                </div><!-- /.wrapper -->
            </li>
            <li class="slide2">
                <div class="wrapper">
                    <div class="content">
                        <div>cena/noc od <span class="green-bold">68 EUR</span></div>
                        <h2>Střední tatry<span>50 apartmánů</span></h2>
                    </div><!-- /.content -->
                </div><!-- /.wrapper -->
            </li>
            <li class="slide3">
                <div class="wrapper">
                    <div class="content">
                        <div>cena/noc od <span class="green-bold">69 EUR</span></div>
                        <h2>Nízké tatry<span>236 apartmánů</span></h2>
                    </div><!-- /.content -->
                </div><!-- /.wrapper -->
            </li>
        </ul>
    </div><!-- /.slideshow -->
</div><!-- /#slideshow -->

【问题讨论】：

标签： javascript jquery html css jquery-cycle

【解决方案1】：

如果您有权访问幻灯片数组并且知道当前幻灯片是哪张幻灯片，则可以显示/隐藏幻灯片导航的部分内容。

这是一个基于你的工作的jsfiddle。

jQuery:

$('.slideshow > ul')
   .before('<div class="wrapper"><div class="content"><div class="slide-nav">') 
   .cycle({ 
        fx:     'scrollLeft', 
        speed:  '600', 
        timeout: 4000, 
        pager:  '.slide-nav',
        next:   '#next', 
        prev:   '#prev',

        nowrap: true,
        onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement) {
            if(zeroBasedSlideIndex == 0) {
                $('#prev').hide();
            } else {
                $('#prev').show();
            }

            if(zeroBasedSlideIndex == ($('#slideshow ul li').length - 1) ) {
                $('#next').hide();
            } else {
                $('#next').show();
            } 
        }
    });

Nowrap 防止幻灯片循环播放。 onPrevNextEvent 是主要部分。

【讨论】：