使用jQuery移動到unorder列表中的下一個元素

我有一個圖像列表，我想要使用next/previous按鈕循環瀏覽。但我在做這件事情時遇到了麻煩。到目前爲止，我已經設法繼續恢復到第一張圖片，無論我點擊下一個鏈接時的圖像。使用jQuery移動到unorder列表中的下一個元素

對列表中的HTML是..

<div class="wrapper"> 

<div class="slider-container"> 
    <ul class="wineslider"> 
     <li> 
      <img src="assets/img/shop/redwine/bottle.png" alt="1"> 
      <div class="info"> 
       <p>I am wine information 1 </p> 
      </div> 
     </li> 
     <li> 
      <img src="assets/img/shop/redwine/bottle.png" alt="2"> 
      <div class="info"> 
       <p>I am wine information 2</p> 
      </div> 
     </li> 
     <li> 
      <img src="assets/img/shop/redwine/bottle.png" alt="3"> 
      <div class="info"> 
       <p>I am wine information 3</p> 
      </div> 
     </li> 
..... 

<a href="#" class="previous">Previous</a> 
    <a href="#" class="next">Next</a> 

</div> 

</div>

jQuery的我一直在擺弄周圍是

這個幻燈片圖像，如果他們點擊 - 該位似乎工作沒關係。

$(document).ready(function() { 
$('.wineslider li').bind({ 
    click: function() { 
     $('.wineslider li').stop().animate({'width':'60px'},600); 
     $(this).stop().animate({'width':'420px'},600); // Width of slideout box 
     $('.info').css('display','block'); 
    }, 
}); 

// Find number of slides 
var count = $('li').length; 
//alert(count); 

// Set current slide number 
var curr = 1; 
ert(curr); 



});

下一按鈕

var active = 0; // starts at zero 
var list = $('ul.wineslider'); 
$("a.next").click(function(event){ 


event.preventDefault();   // cancel click through 
var currentElement = $('.wineslider li'); 
var i = $(currentElement).index(); 

currentElement = currentElement.next(); 
scrollTo(currentElement); 
$('.wineslider li').stop().animate({'width':'60px'},600); 
$(currentElement).stop().animate({'width':'420px'},600); // Width of slideout box 
$('.info').css('display','block'); 

});

由於事先：d

來源

2012-08-13 Simon

變種currentElement是選擇一個裏，但沒有指定其利。做一些事情，比如爲活動的li添加「selected」類。然後你可以做當前elem = $（'。selected'）

來源

2012-08-13 21:52:06

這裏的問題是currentElement是一個jQuery對象，它包含所有li的集合。這不是當前選定的具體li。

在這種情況下，您可能需要爲當前的li元素添加一個類或其他類，以便像這樣獲得更好的處理效果。

currentElement = $('.wineslider li.current'); 
nextElement = currentElement.next();

來源

2012-08-13 21:53:29

使用jQuery移動到unorder列表中的下一個元素

回答

相關問題