随机化幻灯片上的第一张图片
Randomizing the first image on this slideshow?
我已经得到了这个基于jquery的幻灯片启动并运行得很好,作者甚至放入了一个随机化设置,这是我需要的。它工作得很好,除了它不会随机化第一张幻灯片。什么好主意吗?谢谢:)
这是js:(或到原始页面查看更多信息)
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
// var $next = $active.next().length ? $active.next()
// : $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
var $sibs = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 20000 );
});
HTML: <div id="slideshow">
<div class="active">
<img src="img/img1.jpg" />
</div>
<div>
<img src="img/img2.jpg" />
</div>
<div>
<img src="img/img3.jpg" />
</div>
</div>
看起来它只随机化活动幻灯片的兄弟幻灯片,不包括当前活动幻灯片,这是加载页面时的第一个。你可以修复插件的代码,或者像我一样懒惰,在初始化幻灯片之前随机化这些图像。使用jQuery随机化div元素序列
尝试随机化:
function slideSwitch() {
var $active = $('#slideshow div').eq(Math.floor(Math.random() * $('#slideshow div').length);
$(".active").removeClass("active");
$active.addClass("active");
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
// var $next = $active.next().length ? $active.next()
// : $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
var $sibs = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 20000 );
});
相关文章:
- jm按下停止步骤进入滚动的下一张幻灯片
- 当 Flickity 到达下一张或上一张幻灯片时的事件
- 为什么bxSlider会打断我在最后一张幻灯片和第一张幻灯片之间的转换
- 引导程序3转盘-随机选择下一张幻灯片
- 如何在最后一张幻灯片上停止动画
- Basic jQuery Slider中上一张/下一张幻灯片的自定义链接触发器
- 指向html5库最后一张幻灯片后的html页面
- jQuery 循环 如果只有一张幻灯片,则隐藏上一个/下一个导航
- 如何停止幻灯片放映隐藏文本和图像跳到顶部,而下一张幻灯片进来
- iOS 滑块默认为最后一张幻灯片
- 光滑的滑块删除最后一张幻灯片,如果 winWidth < 500
- BX滑块滑块滑块最后一张幻灯片总是隐藏某些部分
- 如何在显示前在幻灯片放映中预加载下一张幻灯片
- 滑块中显示下一张幻灯片的链接.为什么
- 幻灯片放映-将幻灯片链接到URL,仅适用于最后一张幻灯片
- BxSlider将最后一张幻灯片显示为第一张幻灯片
- 如何在flexslider中单击图像时显示下一张幻灯片
- 停止最后一张幻灯片上的jQuery按钮动画
- 在附加的代码中,图像滑块是如何从一张幻灯片发展到另一张幻灯片的
- 使用shift键并单击可转到下一张幻灯片