我正在使用Marco Kuiper的这个剧本，它确实非常好用。我唯一的问题是我不希望这个幻灯片循环。任何人都可以帮我弄清楚如何让这个脚本运行一次？我怀疑它与setInterval函数有关，但我只有足够的Javascript来玩并且不够写（尽管我正在慢慢学习）。提前谢谢！
链接到脚本：
http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html
/*
* Author: Marco Kuiper (http://www.marcofolio.net/)
*/
// Speed of the automatic slideshow
var slideshowSpeed = 7000;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
"title" : "Stairs",
"image" : "dove.jpg",
"url" : "http://www.sxc.hu/photo/1271909",
"firstline" : "Imagine a Day of Peace.",
"secondline" : "",
"thirdline" : ""
}, {
"title" : "Office Appartments",
"image" : "prayer.jpg",
"url" : "http://www.sxc.hu/photo/1265695",
"firstline" : "",
"secondline" : "Imagine a day where the world unites,<br><br> for one purpose",
"thirdline" : ""
}, {
"title" : "Mountainbiking",
"image" : "trees.jpg",
"url" : "http://www.sxc.hu/photo/1221065",
"firstline" : "",
"secondline" : "",
"thirdline" : "To take a day, to feel what it would be like..."
}, {
"title" : "Mountains Landscape",
"image" : "ocean.jpg",
"url" : "http://www.sxc.hu/photo/1271915",
"firstline" : "...to have a world at",
"secondline" : "",
"thirdline" : ""
}
];
jQuery(document).ready(function() {
jQuery("#headerimgs").css({"display":"none"});
jQuery("#headerimgs").fadeIn(2000);
// Backwards navigation
jQuery("#back").click(function() {
stopAnimation();
navigate("back");
});
// Forward navigation
jQuery("#next").click(function() {
stopAnimation();
navigate("next");
});
var interval;
jQuery("#control").toggle(function(){
stopAnimation();
}, function() {
// Change the background image to "pause"
jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" });
// Show the next image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
// Check if no animation is running. If it is, prevent the action
if(animating) {
return;
}
// Check which current image we need to show
if(direction == "next") {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
} else {
currentImg--;
if(currentImg == 0) {
currentImg = photos.length;
}
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
animating = true;
// Make sure the new container is always on the background
currentZindex--;
// Set the background image of the new active container
jQuery("#headerimg" + activeContainer).css({
"background-image" : "url(images/" + photoObject.image + ")",
"display" : "block",
"z-index" : currentZindex
});
// Hide the header text
jQuery("#headertxt").css({"display" : "none"});
// Set the new header text
jQuery("#firstline").html(photoObject.firstline);
jQuery("#secondline")
.attr("href", photoObject.url)
.html(photoObject.secondline);
jQuery("#thirdline")
.attr("href", photoObject.url)
.html(photoObject.thirdline);
jQuery("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);
// Fade out the current container
// and display the header text when animation is complete
jQuery("#headerimg" + currentContainer).fadeOut(2000,function() {
setTimeout(function() {
jQuery("#headertxt").fadeOut({duration:1000});
jQuery("#headertxt").fadeIn({duration:1000});
animating = false;
}, 300);
});
};
var stopAnimation = function() {
// Change the background image to "play"
jQuery("#control").css({ "background-image" : "url(images/btn_play.png)" });
// Clear the interval
clearInterval(interval);
};
// We should statically set the first image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
答案 0 :(得分：0)
如果您希望它一次性通过图像然后停止，您可以像这样更改导航功能（添加带有注释的行）。这个新代码查找幻灯片索引要环绕的情况，当它看到时，它会停止间隔并且不显示新幻灯片 - 有效地停止幻灯片放映。
var navigate = function(direction) {
// Check if no animation is running. If it is, prevent the action
if(animating) {
return;
}
// Check which current image we need to show
if(direction == "next") {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
stopAnimation(); // add this
return; // add this
}
} else {
currentImg--;
if(currentImg == 0) {
currentImg = photos.length;
stopAnimation(); // add this
return; // add this
}
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
答案 1 :(得分：0)
在navigate函数中，添加stopAnimation()
if(currentImg == photos.length + 1) {
currentImg = 1;
stopAnimation() // <~~ add this line here
}
答案 2 :(得分：0)
这应该有效
/*
* Author: Marco Kuiper (http://www.marcofolio.net/)
*/
// Speed of the automatic slideshow
var slideshowSpeed = 7000;
var count = 1;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
"title" : "Stairs",
"image" : "dove.jpg",
"url" : "http://www.sxc.hu/photo/1271909",
"firstline" : "Imagine a Day of Peace.",
"secondline" : "",
"thirdline" : ""
}, {
"title" : "Office Appartments",
"image" : "prayer.jpg",
"url" : "http://www.sxc.hu/photo/1265695",
"firstline" : "",
"secondline" : "Imagine a day where the world unites,<br><br> for one purpose",
"thirdline" : ""
}, {
"title" : "Mountainbiking",
"image" : "trees.jpg",
"url" : "http://www.sxc.hu/photo/1221065",
"firstline" : "",
"secondline" : "",
"thirdline" : "To take a day, to feel what it would be like..."
}, {
"title" : "Mountains Landscape",
"image" : "ocean.jpg",
"url" : "http://www.sxc.hu/photo/1271915",
"firstline" : "...to have a world at",
"secondline" : "",
"thirdline" : ""
}
];
jQuery(document).ready(function() {
jQuery("#headerimgs").css({"display":"none"});
jQuery("#headerimgs").fadeIn(2000);
// Backwards navigation
jQuery("#back").click(function() {
stopAnimation();
navigate("back");
});
// Forward navigation
jQuery("#next").click(function() {
stopAnimation();
navigate("next");
});
var interval;
jQuery("#control").toggle(function(){
stopAnimation();
}, function() {
// Change the background image to "pause"
jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" });
// Show the next image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
// Check if no animation is running. If it is, prevent the action
if(animating) {
return;
}
// Check which current image we need to show
if(direction == "next") {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
} else {
currentImg--;
if(currentImg == 0) {
currentImg = photos.length;
}
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
animating = true;
// Make sure the new container is always on the background
currentZindex--;
// Set the background image of the new active container
jQuery("#headerimg" + activeContainer).css({
"background-image" : "url(images/" + photoObject.image + ")",
"display" : "block",
"z-index" : currentZindex
});
// Hide the header text
jQuery("#headertxt").css({"display" : "none"});
// Set the new header text
jQuery("#firstline").html(photoObject.firstline);
jQuery("#secondline")
.attr("href", photoObject.url)
.html(photoObject.secondline);
jQuery("#thirdline")
.attr("href", photoObject.url)
.html(photoObject.thirdline);
jQuery("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);
// Fade out the current container
// and display the header text when animation is complete
jQuery("#headerimg" + currentContainer).fadeOut(2000,function() {
setTimeout(function() {
jQuery("#headertxt").fadeOut({duration:1000});
jQuery("#headertxt").fadeIn({duration:1000});
animating = false;
}, 300);
});
};
var stopAnimation = function() {
// Change the background image to "play"
jQuery("#control").css({ "background-image" : "url(images/btn_play.png)" });
// Clear the interval
clearInterval(interval);
};
// We should statically set the first image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
if(count != photos.length){
navigate("next");
count++;
}
}, slideshowSpeed);
});