jQuery幻灯片 - 想要随机,但需要从相同的图像开始
jQuery Slideshow - want random but need to start with same image
所以我找到了这个惊人的jQuery幻灯片,叫做Skitter。 真棒! 所以我在我的最新项目中实现了它。我明白了@http://thiagosf.net/projects/jquery/skitter/#documentation
是否有可能(如果是这样,我该如何)随机显示图像,但始终从特定图像开始?例如,假设我希望用户加载页面时显示的第一个图像是带有欢迎消息的特定图像。但是,对于"之后"的每个图像,它都是随机的。
我的头部有"show_randomly:true"部分,我当前的幻灯片已成功随机化。我只是希望有一个"开始"的图像。
因此,从它的主页上,我做了"自定义功能"并将其提供给我的代码复制/粘贴到我的页面头部......
<!-- CSS -->
<link type="text/css" href="scripts/SkitterSlideshow/css/skitter.styles.css"
media="all" rel="stylesheet" />
<!-- JS -->
<script type="text/javascript"
src="scripts/SkitterSlideshow/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript"
src="scripts/SkitterSlideshow/js/jquery.easing.1.3.js"></script>
<script type="text/javascript"
src="scripts/SkitterSlideshow/js/jquery.animate-colors-min.js"></script>
<script type="text/javascript"
src="scripts/SkitterSlideshow/js/jquery.skitter.min.js"></script>
<!-- Init Plugin -->
<script>
$(document).ready(function() {
$(".box_skitter_large").skitter({
animation: "randomSmart",
dots: true,
preview: true,
controls_position: "center",
numbers_align: "right",
hideTools: true,
show_randomly: true,
controls: true,
interval: 5000,
velocity: 0.5,
});
});
</script>
所以就像我说的,我有一个成功的幻灯片运行,它正在随机化图像。只需要一种方法来让它始终从列表中的一个特定图像开始。谢谢!!!
据我所知,这不是 Skitter 脚本的功能。但是,您可以轻松添加它。首先打开jquery.skitter.js
文件(很难对现在使用的 .min.js 文件进行更改,以后可以随时将其最小化)。
找到以下行:
if (this.settings.show_randomly) this.settings.images_links.sort(function(a,b) {
return Math.random() - 0.5;
});
紧接着,添加以下内容:
/* START INITIAL FIXED IMAGE MOD */
if (this.settings.show_randomly) { /* Only use a fixed initial image if show_randomly is enabled */
/* The following function is used to move an item in an array from fromIndex to toIndex */
Array.prototype.move = function(fromIndex, toIndex) {
this.splice(toIndex, 0, this.splice(fromIndex, 1)[0]);
};
initialIndex = 0;
/* The following function finds the desired initial image and stores it's location */
$.each(this.settings.images_links, function(index, item) {
if (item[1].slice(0,9) == "[initial]") initialIndex = index;
});
this.settings.images_links[initialIndex][1].replace("[initial]", ""); /* Removes the [initial] tag so the link works properly */
this.settings.images_links.move(initialIndex, 0); /* Move it to the front of the array so it's displayed first */
}
/* END INITIAL FIXED IMAGE MOD */
然后,要声明初始(开始)映像,只需将[initial]
添加到所需映像的 href 属性的开头即可。以下示例将始终以 images/003.jpg 开头,假设您在脚本选项中启用了show_randomly。
<div class="box_skitter box_skitter_large">
<ul>
<li><a href="#cube"><img src="images/001.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>
<li><a href="#cubeRandom"><img src="images/002.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>
<li><a href="[initial]#block"><img src="images/003.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>
<li><a href="#cubeStop"><img src="images/004.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li>
<li><a href="#cubeHide"><img src="images/005.jpg" class="cubeHide" /></a><div class="label_text"><p>cubeHide</p></div></li>
<li><a href="#cubeSize"><img src="images/006.jpg" class="cubeSize" /></a><div class="label_text"><p>cubeSize</p></div></li>
</ul>
</div>
如果要再次最小化这种情况,可以使用多种 Internet 服务,例如 http://www.minifyjavascript.com、http://refresh-sf.com/yui 或 http://jscompress.com。
- 在HTML/JavaScript中,有没有一种方法可以在图像开始加载时知道图像的最终布局尺寸
- Jquery幻灯片以一行左侧的图像开始,但我希望它从右端开始
- jQuery幻灯片 - 想要随机,但需要从相同的图像开始
- 使用JQuery的图像滑块不显示我选择的下一个图像,而是从头开始显示
- 幻灯片在加载图像时开始,但在下载所有图像之前不会显示第一个图像
- 如何在单击图像时开始播放视频
- 在开始动画之前预加载所有声音和图像
- 什么是开始使用交互式Javascript幻灯片/图像查看器的简单方法
- 在 JW 播放器开始之前不显示图像,如果 URL 包含字符串 base64
- Javascript幻灯片在节目开始时快速出现最后一张图像
- 只有在查看完所有图像后,在图库中循环才开始淡入/淡出图像
- 在手动模式下单击“下一步”或“上一步”按钮后,图像转换会自动开始
- 幻灯片结束时,从第一个图像开始
- 自动开始延迟加载图像,而无需等待用户向下滚动页面
- 我的Greasemonkey脚本开始加载一系列图像.如何在需要时停止它
- 滚动开始时的图像跳跃
- 多图像交换-不确定从哪里开始
- 在不以相同位置开始的setInterval内创建图像
- 谷歌地图API -自定义原型标记图像从今天开始不显示
- 如何在Galleria主题经典上设置开始图像