1

外部リンクにカーソルを合わせてナビゲートできるAnythingSliderを使用したいと思います。しかし、私はそれらの外部の「ナビゲーション」リンクに別のページへのリンクを持たせたいです。したがって、ホバー機能はスライダーを移動しますが、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（クリック）でユーザーを別のページに移動させる方法はありますか？わかる？

4

1 に答える 1

0

のようにリンクに追加の属性を追加してdata-slide、href. return falseまた、リンクを再度クリックできるようにするために を削除しました。ここにデモがあります：

$('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 ではフレーム内で他の Web ページを開くことができないため、target="_blank"各リンクに を追加したことに注意してください。

<a data-slide="1" target="_blank" href="http://www.google.com">1</a>
于 2012-11-07T06:56:01.550 に答える