链接使用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周期插件

回答

相关问题