jQuery幻灯片(Ryan Florence)不适用于Click

时间:2012-11-18 00:19:10

标签: javascript jquery slideshow

我一直试图让jQuery幻灯片(点击时)工作一段时间,但无法弄清楚我哪里出错了。我在这里使用Ryan Florence的jQuery幻灯片导航:

http://ryanflorence.com/jquery-slideshow/demos/slideshownav/

我在这里整理了一个jsFiddle:

http://jsfiddle.net/hAvXt/3/

我确保包含jQuery UI。他的网站上有他的例子中有三个javascript文件(demo.js,jquery.rf.slideshow.js,jquery.rf.slideshownav.js)。我已经把它们全部放到了JSFiddle的javascript部分。

基本上,当我点击正确的按钮时,它会将'幻灯片'div更新为正确的内容,但它不会给我转换。起初我以为是因为我使用'divs'而不是图像,但我过去使用他更简单的幻灯片显示div并且工作正常。非常感谢你的帮助。

这是我的导航栏:

<div class="slideshow" id="slideshow" style="width:1105px; height:1402px;">
<div id="red" style="background-color:red;height:1402px; width:1105px;">TEST 1</div>
<div id="green" style="background-color:green;height:1402px; width:1105px;">TEST 2</div>
<div id="blue" style="background-color:blue;height:1402px; width:1105px;">TEST 3</div>
</div>

这是jQuery函数的实现:

$(function(){
  $('#slideshow').slideshownav({
    transition: 'push(#{direction})',
    mode: 'vertical',
    navSelector: '> ul > li > a',
    duration: 400,
    autoPlay: false
  });
});

1 个答案:

答案 0 :(得分:0)

我让它设置得很奇怪(对于将来遇到这个问题的人)。通过该幻灯片显示,实际的锚点href不会对网站上的源代码造成任何混乱。

它与锚标记的顺序和幻灯片的顺序有关。第一个对应于第一个,等等。