Javascript automatic next image
I created this site which uses a simple javascript function to show images based on the user mousing over or clicking numbered boxes on the right. Now after testing it's been determined that 开发者_Python百科an automatic slideshow should be added on top of this, so that next image will show after a few seconds.
http://www.philippedollo.com/photo/fineart/f_amw.htm
Is there a way to amend this code easily to make it happen easily? --
function showPic(whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
Use setInterval()
.
function getNextPic()
{
// ???
}
setInterval(function ()
{
showPic(getNextPic());
}, 3000); // 3 seconds
There's no need for the if(document.getElementById)
check, since the function is 100% cross-browser.
function showPic(whichpic)
{
document.getElementById('placeholder').src = whichpic.href;
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title ?
whichpic.title : whichpic.childNodes[0].nodeValue;
return false;
}
The following should work for you, I tested it and it works fine on my end.
var curPic,
gallery,
pics;
function cyclePic(){
if(curPic < pics.length){
showPic(pics[curPic]);
}
curPic++;
setTimeout(cyclePic,5000);
}
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
window.onload = function(){
curPic = 0,
gallery = document.getElementById("gallery"),
pics = gallery.getElementsByTagName("a");
cyclePic();
}
精彩评论