我用简单的图像旋转器和缩略图设置了一个小提琴。但是,当页面加载时,脚本以第二个图像开始。
SO上提到的类似帖子将active
类移动到最后一个图像和缩略图。这不是一个好的解决方案。
我需要修改什么才能从第一张图片和缩略图开始?
这是我的小提琴:http://jsfiddle.net/yCXka/4/
和代码:
HTML
<div id="bigImage">
<img src="http://www.placehold.it/500x200&text=500" width="500" height="200" id="image1" class="active"/>
<img src="http://www.placehold.it/400x175&text=400" width="400" height="175" id="image2" />
<img src="http://www.placehold.it/300x150&text=300" width="300" height="150" id="image3" />
<img src="http://www.placehold.it/200x125&text=200" width="200" height="125" id="image4" />
</div>
<ul id="thumbnails">
<li class="activeThumbnail"><img src="http://www.placehold.it/140x100&text=500" width="140" height="100" /></li>
<li><img src="http://www.placehold.it/140x100&text=400" width="140" height="100" /></li>
<li><img src="http://www.placehold.it/140x100&text=300" width="140" height="100" /></li>
<li><img src="http://www.placehold.it/140x100&text=200" width="140" height="100" /></li>
</ul>
CSS:
* {
margin:0;
padding:0;
}
#bigImage {
width:500px;
height:200px;
margin-bottom:30px;
overflow:hidden;
}
#bigImage img {
display:none;
}
#bigImage .active {
display:inline;
}
#thumbnails {
clear:both;
width:610px;
height:100px;
}
#thumbnails li {
float:left;
width:140px;
height:100px;
margin-right:10px;
list-style-type:none;
}
.activeThumbnail {
border:5px solid lime;
}
JS:
$(document).ready(function(){
imageRotator();
// inspiration:
//http://aarontennyson.com/tutorials/demos/slide_show_fade/
});
function imageRotator() {
var active = $('#bigImage .active'),
thumbnails = $('#thumbnails li'),
activeThumbnail = $('#thumbnails .activeThumbnail'),
activeID = active.prop('id'),
next = active.next().length ? active.next() : active.parent().children(':first'),
nextThumb = activeThumbnail.next().length ? activeThumbnail.next() : activeThumbnail.parent().children(':first');
active.fadeOut(800, function() {
thumbnails.removeClass('activeThumbnail');
nextThumb.addClass('activeThumbnail');
next.fadeIn(800).addClass('active');
}).removeClass('active');
setTimeout(imageRotator, 5000);
}
谢谢!
答案 0 :(得分:1)
尝试
$(document).ready(function(){
imageRotator();
// inspiration:
//http://aarontennyson.com/tutorials/demos/slide_show_fade/
});
function imageRotator() {
var active = $('#bigImage .active'),
thumbnails = $('#thumbnails li'),
activeThumbnail = $('#thumbnails .activeThumbnail'),
activeID = active.prop('id'),
next = active.next().length ? active.next() : active.parent().children(':first'),
nextThumb = activeThumbnail.next().length ? activeThumbnail.next() : activeThumbnail.parent().children(':first');
// `.show()` `$(active)`, `0` `duration`
// `.delay()` `1200` `duration`,
// for page load time, adjustable
// continue to `.fadeOut()` method
$(active).show(0).delay(1200).fadeOut(800, function() {
thumbnails.removeClass('activeThumbnail');
nextThumb.addClass('activeThumbnail');
next.fadeIn(800).addClass('active');
}).removeClass('active');
setTimeout(imageRotator, 5000);
}
jsfiddle http://jsfiddle.net/guest271314/n868c/
修改
这确实有帮助!不是完美但完美无缺。关于什么 设置曾经为真的标志,然后旋转器启动?有办法吗? 去做这个? - JsusSalv
$(document).ready(function() {
// `flag` = `started`, default `false`,
// `.on()` `click` of `:first` `#bigImage`,
// or `:first` `#thumbnails` (`selectors`, `event`, adjustable)
// `img`, `flag` set to `true`,
// if `flag` === `true`,
// call (start) `imageRotator()`
var started = false;
$("#bigImage img:first, #thumbnails li img:first")
.on("click", function(e) {
e.preventDefault();
started = true;
if ( started === true ) {
imageRotator();
started = false;
console.log(started);
};
});
// imageRotator();
// inspiration:
//http://aarontennyson.com/tutorials/demos/slide_show_fade/
});
jsfiddle:上面的链接,已更新,包括flag
,event
件