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 回答