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 回答