Question

我通过查看网络上的各种教程创建了一个简单的轮播。

carasol有效，但我需要发生的是，如果有人点击链接，它会显示幻灯片1，而有人点击幻灯片2则显示幻灯片2，依此类推。

我已经为每个链接提供了一个独特的类，以为我可以定位类名：

<a id="show-panel" class="cl_one" href="/link.html">Content 1</a> 
<a id="show-panel" class="cl_two" href="/link.html">Content 2</a>  
<a id="show-panel" class="cl_three" href="/link.html">Content 3</a>

我试着这样做：

$(".cl_one").click(function() {
        offset="0";                          
});

但它不起作用，因为vairable仅在该功能中

以上是基于以下帖子的偏移变量，但这不起作用

这个工作：

var left_value = item_width * (-1) * 1;

这一次也是如此：

var left_value = item_width * (-1) * 2;

但是这个人去了一张空白的幻灯片并打破了carasol：

var left_value = item_width * (-1) * 3;

代码： http://jsfiddle.net/ZkeJf/4/

请注意如何实现我的需要，以便任何帮助/指针都会很棒

我已将灯箱添加到代码中，因此它提供了更多关于我想要实现的内容的图片。

我还需要弄清楚如何阻止链接进入页面（这适用于非JS用户）

Answer 1

您可以使用此轮播http://sorgalla.com/jcarousel/，之后使用 offset 参数从第二张幻灯片启动。

示例：

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        offset:2
    });
});
</script>

Answer 2

我看到你使用哈希变量。然后你可以做这样的事情

switch(window.location.hash)
{
case 'one': 
default:
  offset=1;
  break;
case 'two':
  offset=2
  break;
case 'three':
  offset =3;
  break;
}
var left_value = item_width * (-1) * offset;

这样您就可以根据哈希参数实例化默认值。

简单轮播，但在单击某个链接时使用特定目标幻灯片

2 个答案: