[英]Links not working when using jquery cycle plugin
我有這個 HTML 代碼:
<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" /> <a href="subscribes.php">1</a></li>
<li class="headerLinksItem"><img src="images/numbers/2.png" alt="" width="20" height="22" align="absmiddle" /> <a href="advertisement.php">2</a></li>
<li class="headerLinksItem"><img src="images/numbers/3.png" alt="" width="20" height="22" align="absmiddle" /> <a href="contactPage.php">3</a></li>
<li class="headerLinksItem"><img src="images/numbers/4.png" alt="" width="20" height="22" align="absmiddle" /> <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" /> <a href="manageAlbums.php">5</a></li>
<li class="headerLinksItem"><img src="images/numbers/2.png" alt="" width="20" height="22" align="absmiddle" /> <a href="words.php">6</a></li>
<li class="headerLinksItem"><img src="images/numbers/3.png" alt="" width="20" height="22" align="absmiddle" /> <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" /> <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" /> <a href="infoControl.php">9</a></li>
<li class="headerLinksItem"><img src="images/numbers/2.png" alt="" width="20" height="22" align="absmiddle" /> <a href="partners.php">10</a></li>
<li class="headerLinksItem"><img src="images/numbers/3.png" alt="" width="20" height="22" align="absmiddle" /> <a href="personalPage.php">11</a></li>
<li class="headerLinksItem"><img src="images/numbers/4.png" alt="" width="20" height="22" align="absmiddle" /> <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" /> <a href="main.php">13</a></li>
</ul>
</div>
</div>
和這個 javascript 代碼:
$('.headerPages').cycle({
timeout: 0,
next: '#next',
prev: '#prev'
});
每件事都運行良好,但是當我嘗試單擊每張幻燈片中的鏈接時,我不能並且我從上一張幻燈片中獲取鏈接,因為它的不透明度設置為 0,並且 z-index 屬性就像這個插件工作時的圖層一樣。
我嘗試使用cssAfter, cssBefore
並且它也不起作用
知道如何解決這個問題嗎?
我今天遇到了同樣的問題,發現循環為活動幻燈片設置了 class。 因此,您可以輕松地使用 CSS 而不是回調 function:
.cycle-slide-active {
z-index: 1001 !important;
}
我對這個原本完美的插件有完全相同的問題。 經過一番摸索,我決定使用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);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.