添加第二個尋呼機到jquery循環幻燈片

Question

我想添加第二個尋呼機到我的幻燈片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> 

Answer 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> 

Answer 2

我不知道，如果週期的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'); 
});