[英]Links not working when using jquery cycle plugin
I have this HTML code:我有这个 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>
and this javascript code:和这个 javascript 代码:
$('.headerPages').cycle({
timeout: 0,
next: '#next',
prev: '#prev'
});
every thing is working fine but when I am trying to click links in each slide, I can't and I get links from the prev slide because of the opacity it's set to 0 and the z-index property like layers as this plugin work.每件事都运行良好,但是当我尝试单击每张幻灯片中的链接时,我不能并且我从上一张幻灯片中获取链接,因为它的不透明度设置为 0,并且 z-index 属性就像这个插件工作时的图层一样。
I tried to use cssAfter, cssBefore
and it's not working also我尝试使用cssAfter, cssBefore
并且它也不起作用
any idea how to solve this problem?知道如何解决这个问题吗?
I´ve came across the same problem today and found out that cycle sets a class for the active slide.我今天遇到了同样的问题,发现循环为活动幻灯片设置了 class。 So you easily can use CSS instead of the callback function:因此,您可以轻松地使用 CSS 而不是回调 function:
.cycle-slide-active {
z-index: 1001 !important;
}
I had the exact same issue with this otherwise perfect plugin.我对这个原本完美的插件有完全相同的问题。 After a bit of fumbling, I settled for a solution using the after
callback to automatically reset the z-index
.经过一番摸索,我决定使用after
回调自动重置z-index
的解决方案。 It should be doable using cssAfter
as well.使用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.