我试图用javascript创建一个简单的淡入淡出图像幻灯片。我设法创建了一个可以显示一个图像,淡出,然后淡入另一个图像的图像,但这不是我想要的。我想要的是,当第一张图像淡出时,它后面已经有另一张图像了,当另一张也淡出时,那张后面也有另一个图像。我尽量避免在幻灯片放映过程中,网页中保存幻灯片的部分在任何时候都是空的。有人能帮我编辑代码或向我展示如何实现这一点吗?
var count = 1;
setInterval(function(){
if (count <= 3){
$("#slideshow").fadeOut(2000);
setTimeout(function(){$("#slideshow").attr("src","breakup/"+ count +".jpg")},2000);
$("#slideshow").fadeIn(2000);
count++;
if (count>3){
count = 1
}
}//end if
}/*end function*/,5000);
预加载所有图像可能是最简单的
css:
<style>
.slider{
position: relative;
}
img {
position: absolute;
top:0;
left:0;
}
</style>
Javascript:
<script>
var count = 1
setInterval(function(){
var old= $('#img-' + count);
old.fadeOut(2000);
count++;
if (count>3){
count = 1
}
var next= $('#img-' + count);
next.fadeIn(2000);
}, 5000);
</script>
html:
<div class="slider">
<img id="img-1" src="breakup/1.jpg">
<img id="img-2" src="breakup/2.jpg">
<img id="img-3" src="breakup/3.jpg">
</div>
试试这个http://jsfiddle.net/wfvD6/.
基本上,它克隆旧图像并将其放在新图像上,然后同时淡出旧图像和淡出新图像。
//clone the old image
var ghost = slider.clone();
//remove id
ghost.removeAttr('id');
//make the ghost image just over the old image
var pos = slider.position();
ghost.css({
position: 'absolute',
top: pos.top,
left: pos.left
});
ghost.insertBefore(slider);
//$("#slideshow").attr("src","breakup/"+ count+".jpg");
//change image
setImage(count);
//fadeout ghost
ghost.fadeOut(2000, function () {
ghost.remove();
ghost = null;
});
//fadein slider
slider.fadeIn(2000);
我已经创建了这个小提琴http://jsfiddle.net/xmLk4/您应该在淡出后设置幻灯片1和2的图像,以便在图像淡入之前加载图像。
function fade(){
$("#slide2").fadeOut(2000, function() {
// set new image slide 2
}).delay(2000).fadeIn(2000, function() {
// set new image slide 1
}).delay(2000);
}
setInterval(fade, 8000);
fade();