向 Jquery Cycle 幻灯片添加第二个寻呼机答案

【问题标题】：Adding a second pager to a Jquery Cycle slideshow向 Jquery Cycle 幻灯片添加第二个寻呼机
【发布时间】：2012-03-17 05:39:04
【问题描述】：

我正在尝试以 1/3 > 格式在我的幻灯片中添加第二个寻呼机，因此如果有 3 张幻灯片，它会显示有多少张幻灯片以及您的幻灯片，如果您想向前移动，只需单击箭头。它必须很简单，但我找不到任何例子。这是我目前所拥有的：

$(function() {
$('.slideshow').each(function() {
    var $nav = $('<div class="nav"></div>').insertAfter(this);
    var $nav2 = $('<div class="nav2"></div>').insertBefore(this);
    $('<div class="caption">&nbsp;</div>').insertAfter($nav);

    $(this).cycle({
        fx:     'fade',
        speed:   300,
        timeout: 0,
        pager:   $nav,
        after:   onAfter
    });
});

function onAfter(curr, next, opts) {
    var src = '&nbsp;';
    if (next.src)
        src = next.src.match(/([a-zA-Z0-9\.]+$)/)[1];
    $(curr).parent().nextAll('div.caption:first').html(src);
}

有什么想法吗？

更新： 谢谢，杰夫兰姆......我试过了，它几乎就在那里。因为我在一页上有 2 个幻灯片，所以导航是相互叠加的，所以如果我继续前进，两个标题都会改变。我尝试只更改类名，但它仍然叠加。我在这里想念什么？这是我更新的代码：

$(function() {
$('.slideshow').each(function() {
    var $nav = $('<div class="nav"></div>').insertAfter(this);
    var $nav2 = $('<div class="nav2"></div>').insertBefore(this);

    $('<div class="caption">&nbsp;</div>').insertBefore($nav);
    $('<div class="caption2">&nbsp;</div>').insertAfter($nav2);

    $('.next').click(function() {
        $('.slideshow').cycle('next');
    });
    $('.next2').click(function() {
        $('.two').cycle('next');
    });

    $(this).cycle({
        fx:     'fade',
        speed:   300,
        timeout: 0,
        pager:   $nav,
        after:   onAfter
    });
});

function onAfter() { 
    $('.caption').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $(".slideshow div").length + '</h3>');
}
function onAfter() { 
    $('.caption2').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $(".two div").length + '</h3>');
}

如果需要，我确实想要添加第三张幻灯片的选项。这是我的 HTML：

<div class="slideshow-container">
<h2>CASE STUDIES</h2>
<input type="button" class="next" value=">" />

<div class="slideshow">
<div> <img src="images/jorge-pensi.png" width="278" height="270" />
  <h1>Jorge<br/>
    <strong>Pensi</strong></h1>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
 </div>
  <div> <img src="images/jorge-pensi.png" width="278" height="270" />
  <h1>Designer<br/>
    <strong>Two</strong></h1>
   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
 </div>
 </div>
 </div>
 <div class="slideshow-container">
 <h2>OUR DESIGNERS</h2>
 <input type="button" class="next2" value=">" />

  <div class="slideshow two">
  <div> <img src="images/jorge-pensi.png" width="278" height="270" />
  <h1>Jorge<br/>
    <strong>Pensi</strong></h1>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
<div> <img src="images/jorge-pensi.png" width="278" height="270" />
  <h1>Designer<br/>
    <strong>Two</strong></h1>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>

【问题讨论】：

关于更新：您为两个幻灯片调用了相同的“onAfter”函数。除非您想将其扩展到 2 个以上的幻灯片，否则不要执行 .each() 并单独配置每个幻灯片。此外，由于您不包含 html，因此很难弄清楚您要做什么。
下次你应该问整个问题。这样回答的人就不需要重写他们的代码了……
你是对的。我很抱歉。

标签： javascript jquery slideshow jquery-cycle pager

【解决方案1】：

好的，这里是重写。它不会在 js 中添加 html 标题和按钮，但您可以根据需要进行更改。您可以通过以下方式使其自动递增：

$(document).ready(function() {
    var i = 0;
    $('.ss').each(function() {
        i+=1;

        $('#prev'+i).click(function() {
            $('#slideshow'+i).cycle('prev');
        });
    }
}

但是，我觉得我是在为您编写整个内容，而不是您自己编写页面。这是一个工作版本，它明确地调用每个幻灯片：

<script type="text/javascript"> 
$(document).ready(function() {
    startShow1();

    $('#prev1').click(function() {
        $('#slideshow1').cycle('prev');
    });
    $('#next1').click(function() {
        $('#slideshow1').cycle('next');
    });


    startShow2();

    $('#prev2').click(function() {
        $('#slideshow2').cycle('prev');
    });
    $('#next2').click(function() {
        $('#slideshow2').cycle('next');
    });
});

function startShow1() {
    $('#slideshow1').cycle({
        fx:       'fade', 
        speed:    0,
        timeout:  600,
        autostop: 1,
        after:    onAfter1
    });
}

function startShow2() {
    $('#slideshow2').cycle({
        fx:       'fade', 
        speed:    0,
        timeout:  600,
        autostop: 1,
        after:    onAfter2
    });
}


function onAfter1() { 
    $('#caption1').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $("#slideshow1 img").length + '</h3>'); 
}

function onAfter2() { 
    $('#caption2').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $("#slideshow2 img").length + '</h3>'); 
}

</script> 
</head> 
<table>
    <tr>
    <td colspan="2">
        <div class='ssc' id="ss1_container">
            <div class='ss' id="slideshow1">
                <img src="img1.png">
                <img src="img2.png">
            </div>
        </div>
        </td>
    </tr>
    <tr>
        <td width="50px">
            <div id="caption1">

            </div>
        </td>
        <td>
            <input type="button" id="prev1" value="Prev" />
            <input type="button" id="next1" value="Next" />
        </td>
    </tr>

    <tr>
    <td colspan="2">
        <div class='ssc' id="ss2_container">
            <div class='ss' id="slideshow2">
                <img src="img1.png">
                <img src="img2.png">
            </div>
        </div>
        </td>
    </tr>
    <tr>
        <td width="50px">
            <div id="caption2">

            </div>
        </td>
        <td>
            <input type="button" id="prev2" value="Prev" />
            <input type="button" id="next2" value="Next" />
        </td>
    </tr>
</table>

</body> 
</html>

【讨论】：

杰夫。这是完美的，完全有道理。非常感谢。我已经为此工作了很长时间，并且被难住了。这绰绰有余。如果有办法付钱给你，我会的。干杯！

【解决方案2】：

我不知道 Cycle 的 API 是否专门支持这个。不过，这会奏效。

<div id="ss">
    <img src="image.png">
    <img src="image.png">
    <img src="image.png">
    <img src="image.png">
    <img src="image.png">
</div>

在幻灯片中指定after

$('#ss').cycle({
    after:    onAfter
});

定义onAfter：

function onAfter() { 
    $('#caption').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $("#slideshow3 img").length + '</h3>');
}

在图片下定义一个 div：

<div id="caption"></div>

添加按钮和/或箭头：

<input type="button" id="prev" value="<" />
<input type="button" id="next" value=">" />

在您的 $(document).ready 函数中，将点击操作分配给您的按钮：

$('#prev').click(function() {
    $('#ss').cycle('prev');
});
$('#next').click(function() {
    $('#ss').cycle('next');
});

【讨论】：