我正在寻找一种具有在导航中添加幻灯片名称而不是在导航中添加数字的功能的滑块

下面是简单的jQuery Slider http://basic-slider.com/

如果有人可以告诉我是否可以修改此滑块,以便可以用“滑块名称”替换项目符号导航并具有相同的功能,我将不胜感激

Slide 1 Slide 2 Slide 3 Slide 4

OnMouse悬停幻灯片应更改为适当的幻灯片,而onMouse Click则应转到特定的链接。

可以用Nivo滑杆完成同样的操作

最佳答案

滑块导航使用文本标题,而不是数字:

  <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/

10-05 20:55
查看更多