2

使用来自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;
}

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

*我仍在寻找一种让滑块随机显示其第一张图像的方法...

4

1 回答 1

0

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

工作示例。

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

为了提高效率，这就像图像预加载器一样工作。图像 src 从 HTML 中排除，并且存在一个用于图像的数组，名为画廊。

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

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

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

随机发生器。

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

// Randomize the Array
galleryPosition.sort(function() {return 0.5 - Math.random()});
于 2013-07-21T17:53:48.440 回答