Question

我想在1/3＆gt;中为我的幻灯片添加第二个寻呼机格式，所以如果有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>

Answer 1

我不知道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');
});

Answer 2

好的，这是重写。它不会在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>

将第二个寻呼机添加到Jquery Cycle幻灯片

2 个答案: