1

我有这个 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" /> &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'
});

一切工作正常，但是当我尝试单击每张幻灯片中的链接时，我不能并且我从上一张幻灯片中获取链接，因为它的不透明度设置为 0，并且 z-index 属性与此插件工作时类似的图层。

我尝试使用cssAfter, cssBefore它也无法正常工作

知道如何解决这个问题吗？

4

2 回答 2

1

我今天遇到了同样的问题，发现循环为活动幻灯片设置了一个类。因此，您可以轻松地使用 CSS 代替回调函数：

.cycle-slide-active {
    z-index: 1001 !important;
}
于 2016-06-21T14:46:43.223 回答
0

我对这个原本完美的插件有完全相同的问题。经过一番摸索，我决定使用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-23T22:45:36.233 回答