0

ナビゲーションとしての数値ではなく、ナビゲーションにスライド名を追加する機能を持つスライダーを探しています

以下は単純なjQuery Slider http://basic-slider.com/です

このスライダーを変更して、箇条書きのナビゲーションをスライド名に置き換えて同じ機能を持たせることができるかどうか教えていただければ幸いです

Slide 1 Slide 2 Slide 3 Slide 4

OnMouseホバースライドは適切なスライドに変わりonMouse Click、特定のリンクに移動するはずです。

Nivoスライダーでも同じことができます

4

1 に答える 1

2

番号ではなく、テキスト キャプションのスライダー ナビゲーションの使用:

  <ul class="bjqs">
      <li title="Slide 1"> ... </li>
      <li title="Slide 2"> ... </li>
      <li title="Slide 3"> ... </li>
  </ul>

Javascript編集行＃478これを変更

  var slidenum    = key + 1,

これとともに：

  var slidenum    = $(slide).attr('title') === undefined ? key + 1 : $(slide).attr('title'),

クリック アンド ホバー機能:

Javascript を行 #56 として追加:

  captionUrlArray : [] //Url for each of the captions

Javascript を行 #488 として追加:

   var newUrl = settings.captionUrlArray[key];

Javascript編集行＃495これを変更

  marker.on('click','a',function(e){

これに：

  marker.on('mouseover','a',function(e){

*スライダー ライブラリを呼び出すときは、captionUrlArray を設定することを忘れないでください!!! *

  $('#banner-slide').bjqs({
        animtype      : 'slide',
        height        : 320,
        width         : 620,
        responsive    : true,
        randomstart   : true,
        captionUrlArray: [ "http://google.com", "", "http://example.com" ]
      });

最終的な作業スクリプトは次のとおりです: http://jsfiddle.net/dEsWp/4/

于 2013-08-06T08:19:13.017 に答える