在Jquery循环幻灯片中添加第二个寻呼机

我正试图在我的幻灯片中添加第二个页面，格式为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);
}

有什么想法吗？

更新：谢谢，杰夫·兰姆。。。我试过了，就快到了。因为我在一个页面上有两个幻灯片，导航是叠加在一起的，所以如果我继续看其中一个，两个标题都会改变。我试着只是更改类名，但它仍然会叠加。我在这里错过了什么？这是我更新的代码：

$(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>

好的，这是一个重写。它没有在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>

我不知道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=">" />

在您的$（文档）.ready函数中，将点击操作分配给您的按钮：

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

相关内容

最新更新

热门标签：