javascript - touchslider.com 如何添加几个选项

Question

使用来自 http://touchslider.com 的代码

1.) 如何将“currentClass”(它开始的图像)设置为随机？ 所以任何一张图片都会在加载时出现？

2.) 如何通过点击图片切换脚本？

更具体地说，有导航链接和您可以单击/滑动的图像 你如何设置它，以便当你点击一张图片时，它会锁定到该图片，禁用导航链接和滑动？？

编辑:第二个选项已解决 +

我能够解决编辑 touchslider.com 脚本的问题，并通过使用透明 div 使请求的第二个选项成为可能。

JS(在正文中)

<script>
$(document).ready(function(){
var $content = $("#disablediv1").hide();
$(".lock").on("click", function(e){
$content.toggle();
});
});
</script>

HTML(环绕图像)

<a class="lock" href="#"><img src="IMAGELINK"></img></a>

HTML(位于要禁用的链接上方的透明 div)

<div id="disablediv1"></div>

CSS(用于透明 div)

#disablediv1{
position:absolute;
left:200px;
top:20px;
width:600px;
height:544px;
z-index:999;
}

^希望有人会觉得有帮助。

*我仍在寻找一种方法让 slider 随机显示它的第一张图片...

Answer 1

我整理了 touchslider 示例中的原始 HTML 和 CSS。 http://touchslider.com/

工作示例。

http://jsfiddle.net/jvt7U/1/

为了提高效率，它的工作方式类似于图像预加载器。图像 src 被排除在 HTML 之外，存在一个名为 gallery 的图像数组。

有两个循环。第一个循环设置数组结构中的随机顺序。例如:

2,0,1
1,2,0
0,1,2

第二个循环根据图库数组中的图像路径分配图像位置。

随机生成器。

您可以四处寻找更好的随机数生成器，只需替换此处的代码即可。

// Randomize the Array
galleryPosition.sort(function() {return 0.5 - Math.random()});