Question

我想使用AnythingSlider，它允许您通过将鼠标悬停在外部链接上进行导航。但我希望那些外部“nav”链接能够链接到不同的页面。因此悬停功能会移动滑块，但是当您单击1-5时，它们会将您引导至另一个页面（如page1.html，page2.html，page3.html等...）。例如，请参阅我的jsfiddle：

$('#slider').anythingSlider({
buildNavigation: false,
buildStartStop: false,
buildArrows: false
});

$('ul.nav a').bind('mousemove', function() {
var h = this.hash;
// external links will fall through and go to the external url
if (/#\d/.test(h)) {
    $('#slider').anythingSlider(h.substring(1));
    return false;
}
});

<ul id="slider">
<li><img src="http://placekitten.com/300/200" alt="" /></li>
<li><img src="http://placehold.it/300x200" alt="" /></li>
<li><img src="http://placebear.com/300/200" alt="" /></li>
<li><img src="http://lorempixel.com/300/200" alt="" /></li>
<li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>

<ul class="nav">
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
</ul>

但我希望导航区域也有链接（但也会激活悬停滑块进度）：

<ul class="nav">
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
<li><a href="5.html">5</a></li>
</ul>

http://jsfiddle.net/58Qmg/

重申：反正有没有悬停功能移动滑块，还有li ahref（onclick）将用户带到另一个页面？有意义吗？

Answer 1

您可以为data-slide等链接添加其他属性，然后阅读该属性而不是href。我还删除了return false，以便再次点击该链接。这是a demo：

$('ul.nav a').bind('mousemove', function(e) {
    // get slide number
    var h = $(this).attr('data-slide');
    // external links will fall through and go to the external url
    if (h) {
        $('#slider').anythingSlider(h);
    }
});

请注意，由于jsFiddle不允许您在框架中打开其他网页，因此我在每个链接中添加了target="_blank"：

<a data-slide="1" target="_blank" href="http://www.google.com">1</a>

AnythingSlider悬停在外部链接（Mouseover）上也有一个href链接？

1 个答案: