鏈接使用jQuery週期插件

不工作時，我有這樣的HTML代碼：鏈接使用jQuery週期插件

<div class="headerPages"> 
     <div style="right: 0px"> 
      <ul dir="rtl"> 
      <li class="headerLinksItem"><img src="images/numbers/1.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="subscribes.php">1</a></li> 
      <li class="headerLinksItem"><img src="images/numbers/2.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="advertisement.php">2</a></li> 
      <li class="headerLinksItem"><img src="images/numbers/3.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="contactPage.php">3</a></li> 
      <li class="headerLinksItem"><img src="images/numbers/4.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="newsBar.php">4</a></li> 
      </ul> 
     </div> 
     <div style="right: 0px; opacity: 0"> 
      <ul dir="rtl"> 
      <li class="headerLinksItem"><img src="images/numbers/1.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="manageAlbums.php">5</a></li> 
      <li class="headerLinksItem"><img src="images/numbers/2.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="words.php">6</a></li> 
      <li class="headerLinksItem"><img src="images/numbers/3.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="addVideo.php?type=1">7</a></li> 
      <li class="headerLinksItem"><img src="images/numbers/4.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="addVideo.php?type=2">8</a></li> 
      </ul> 
     </div> 
     <div style="right: 0px; opacity: 0"> 
      <ul dir="rtl"> 
      <li class="headerLinksItem"><img src="images/numbers/1.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="infoControl.php">9</a></li> 
      <li class="headerLinksItem"><img src="images/numbers/2.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="partners.php">10</a></li> 
      <li class="headerLinksItem"><img src="images/numbers/3.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="personalPage.php">11</a></li> 
      <li class="headerLinksItem"><img src="images/numbers/4.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="manageVotes.php">12</a></li> 
      </ul> 
     </div> 
     <div style="right: 0px; opacity: 0"> 
      <ul dir="rtl"> 
      <li class="headerLinksItem"><img src="images/numbers/1.png" alt="" width="20" height="22" align="absmiddle" /> &nbsp;<a href="main.php">13</a></li> 
      </ul> 
     </div> 
     </div>

和這段JavaScript代碼：

$('.headerPages').cycle({ 
     timeout: 0, 
     next: '#next', 
     prev: '#prev' 
});

每一件事工作正常，但是當我試圖點擊鏈接每張幻燈片，我不能，我得到prev幻燈片的鏈接，因爲它的不透明度設置爲0，而z-index屬性就像這個插件的層次一樣工作。

我試圖用cssAfter, cssBefore，它不是也在努力

任何想法如何解決這個問題？

來源

2011-06-08 Saleh

您的標記無效。 'br'標籤不能直接被'ul'標籤包含（'ul' [只有**可以直接包含]（http://www.w3.org/TR/html5/grouping-content.html# ul-element）'li'標籤）。無效的標記可能會使JavaScript和DOM（直接或使用庫）的操作有問題，尤其是，跨瀏覽器。因此，第1步將糾正標記，即完全通過[驗證]（http://validator.w3.org）的位置，或者是「僅」屬性錯誤而不是結構化錯誤。 – 2011-06-08 13:59:10

我刪除了所有'br'元素，我仍然面臨同樣的問題 – Saleh 2011-06-08 14:02:57

好的交易。至少你知道這不是標記。 :-) – 2011-06-08 14:10:06

我有完全相同的問題，這個完美的插件。經過一番摸索後，我決定使用after回調來自動重置z-index。它應該可以使用cssAfter以及。

$(document).ready(function() { 
    $('#slideshow').cycle({ 
     // options there, 
     after: onAfter 
    }); 
}); 


function onAfter(out) 
{ 
    // Dyamically set the greater z-index for the current slide. 
    // Works with any number of slides. 

    $(this).css('z-index', Number($(out).css('z-index'))+1); 
    $(out).css('z-index', Number($(out).css('z-index'))-1); 
};

來源

2011-06-23 22:45:36

我今天遇到了同樣的問題，發現該週期爲活動幻燈片設置了一個類。因此，您可以輕鬆地使用CSS代替回調函數：

.cycle-slide-active { 
    z-index: 1001 !important; 
}

來源

2016-06-21 14:46:43 Status4

鏈接使用jQuery週期插件

回答

相關問題