点击按钮后,照片不会改变。
代码:
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://3.bp.blogspot.com/-5A5xpicPF5g/T8srguvp3TI/AAAAAAAAEPs/bLuFIK0gDss/s400/nature-wallpaper-23.jpg"
var image2 = new Image()
image2.src = "http://1.bp.blogspot.com/-IlYDMtyXMRU/Tekx0hgHwOI/AAAAAAAAQg8/rhY1roUhBEQ/s400/Nature%252520Mountains%252520photo.jpg"
var image3 = new Image()
image3.src = "http://4.bp.blogspot.com/-1hG0IHVo9Y8/UYDx-XrTOWI/AAAAAAAAO5w/GvJsWP3ztmo/s400/desktop-nature-wallpapers.jpg"
var image4 = new Image()
image4.src = "http://2.bp.blogspot.com/-TCNzi5H1sac/UEhqAEBrezI/AAAAAAAABEs/fNX6Tb9GNbI/s400/beautiful-jungle-waterfall-nature-wallpaper.jpg"
var image5 = new Image()
image5.src = "https://www.gocolumbiamo.com/ParksandRec/Parks/Forum_Nature_Area/images/forum_nature_area2.jpg"
var image6 = new Image()
image6.src="http://2.bp.blogspot.com/_3f95iVVUx6I/S84ZvEqhxRI/AAAAAAAAPEc/5270_bLigcQ/s400/Nature-Photos-6.jpg"
var image7 = new Image()
image7.src="http://1.bp.blogspot.com/-5mMn7WmIvAI/UB_vkoq0UAI/AAAAAAAAAMc/P74UqHgpSqo/s1600/beautiful-nature-tree-water-background-wallpaper-for-laptop-desktop.jpg"
var image8 = new Image()
image8.src="http://www.creative-writing-now.com/images/let-nature-lead-the-way-21241647.jpg"
var image9 = new Image()
image9.src="http://2.bp.blogspot.com/-JxEm57kYpms/UMAvQULqnuI/AAAAAAAAOis/vVuC7CIN-BU/s400/Green+Nature+Wallpapers+02.jpg"
var image10 = new Image()
image10.src="http://3.bp.blogspot.com/-w9houFtpzjM/T-XtaJ0cKoI/AAAAAAAAEas/aMvENEphhNI/s400/Fantasy+Nature+Wallpapers+1.jpg"
var image11 = new Image()
image11.src="http://c3e308.medialib.glogster.com/media/96/96ef80fa1195ebb760529a4a6d3cccdb11a4a003903ae7df953eddf62efa5ee1/fabulous-nature.jpg"
var image12 = new Image()
image12.src="http://2.bp.blogspot.com/-BNzMjXhqa5c/Te2RFA7NWgI/AAAAAAAAAVo/Jv6NZB1qFZ4/s1600/beijing+Songshan.jpg"
var image13 = new Image()
image13.src="http://2.bp.blogspot.com/__GPVmySbCtY/SM5gmBop62I/AAAAAAAAAUA/b07tAsJ_mEY/s400/nature-summer-wallpaper-22.jpg"
var image14 = new Image()
image14.src="http://1.bp.blogspot.com/_E0lrTQ7bI1Q/Sdiss6QL4LI/AAAAAAAAAgI/MLDVrT6SrOI/s400/Nature+Wallpapers+9.jpg"
var image15 = new Image()
image15.src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg"
var image16 = new Image()
image16.src="http://2.bp.blogspot.com/-yO7L_hm-MKo/TW-ongr6jkI/AAAAAAAAGEI/SHe6bu0ihyA/s400/free-wallpapers-nature-846_001.jpg"
var image17 = new Image()
image17.src="http://2.bp.blogspot.com/_sx0Gt1J0RnM/Scw5mF5LR0I/AAAAAAAACO8/gz_XhyQ0mCg/s400/FunN2sHhWallPapers.Blogspot.com_HD.Digital.Nature_20.jpg"
var image18 = new Image()
image18.src="http://www.mobileapples.com/Assets/Content/Wallpapers/Natural%20Beauty%20In%20Cold.jpg"
var image19 = new Image()
image19.src="http://www.topchinatravel.com/pic/city/zhangjiajie/attractions/Tianzi-Mountain-Nature-Reserve-3.jpg"
var image20 = new Image()
image20.src="http://magickalgraphics.com/Graphics/Miscellaneous/Nature/nature48.gif"
</script>
<p align="middle"><img src="http://1.bp.blogspot.com/-IlYDMtyXMRU/Tekx0hgHwOI/AAAAAAAAQg8/rhY1roUhBEQ/s400/Nature%252520Mountains%252520photo.jpg" width="500" height="300" name="slide" /></p>
<P ALIGN="MIDDLE"><button onclick="nextphoto()">Next Photo</button><button onclick="lastphoto()">Last Photo</button></P>
<script type="text/javascript">
function nextphoto(){
step=step+1
}
function lastphoto(){
step=step-1
}
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<20)
step++;
else
step=1;
setTimeout("slideit()",2000);
}
slideit();
</script>
答案 0 :(得分:2)
当您致电nextphoto()
和lastphoto()
时,您只是更改了step
变量......您实际上并没有使用它。
(编辑:我刚刚注意到你已经定义了step
......我的错误)
首先,您需要在slideit()
和nextphoto()
内致电lastphoto()
...
function nextphoto() {
step = step + 1; // This can also be done with step++;
slideit();
}
function lastphoto(){
step = step - 1; // This can also be done with step--;
slideit();
}
其次,您应该考虑使用arrays而不是单个变量。
例如......
var images = [];
images.push("http://3.bp.blogspot.com/-5A5xpicPF5g/T8srguvp3TI/AAAAAAAAEPs/bLuFIK0gDss/s400/nature-wallpaper-23.jpg")
images.push("http://1.bp.blogspot.com/-IlYDMtyXMRU/Tekx0hgHwOI/AAAAAAAAQg8/rhY1roUhBEQ/s400/Nature%252520Mountains%252520photo.jpg")
然后您可以浏览images[0]
,images[1]
等
答案 1 :(得分:2)
这是一个可行的方法
加载图片
var size = 20;
var image = [];
for(i=0; i<size; i++) image.push(new Image());
image[0].src = "http://3.bp.blogspot.com/-5A5xpicPF5g/T8srguvp3TI/AAAAAAAAEPs/bLuFIK0gDss/s400/nature-wallpaper-23.jpg"
image[1].src = "http://1.bp.blogspot.com/-IlYDMtyXMRU/Tekx0hgHwOI/AAAAAAAAQg8/rhY1roUhBEQ/s400/Nature%252520Mountains%252520photo.jpg"
image[2].src = "http://4.bp.blogspot.com/-1hG0IHVo9Y8/UYDx-XrTOWI/AAAAAAAAO5w/GvJsWP3ztmo/s400/desktop-nature-wallpapers.jpg"
image[3].src = "http://2.bp.blogspot.com/-TCNzi5H1sac/UEhqAEBrezI/AAAAAAAABEs/fNX6Tb9GNbI/s400/beautiful-jungle-waterfall-nature-wallpaper.jpg"
image[4].src = "https://www.gocolumbiamo.com/ParksandRec/Parks/Forum_Nature_Area/images/forum_nature_area2.jpg"
image[5].src = "http://2.bp.blogspot.com/_3f95iVVUx6I/S84ZvEqhxRI/AAAAAAAAPEc/5270_bLigcQ/s400/Nature-Photos-6.jpg"
image[6].src = "http://1.bp.blogspot.com/-5mMn7WmIvAI/UB_vkoq0UAI/AAAAAAAAAMc/P74UqHgpSqo/s1600/beautiful-nature-tree-water-background-wallpaper-for-laptop-desktop.jpg"
image[7].src = "http://www.creative-writing-now.com/images/let-nature-lead-the-way-21241647.jpg"
image[8].src = "http://2.bp.blogspot.com/-JxEm57kYpms/UMAvQULqnuI/AAAAAAAAOis/vVuC7CIN-BU/s400/Green+Nature+Wallpapers+02.jpg"
image[9].src = "http://3.bp.blogspot.com/-w9houFtpzjM/T-XtaJ0cKoI/AAAAAAAAEas/aMvENEphhNI/s400/Fantasy+Nature+Wallpapers+1.jpg"
image[10].src = "http://c3e308.medialib.glogster.com/media/96/96ef80fa1195ebb760529a4a6d3cccdb11a4a003903ae7df953eddf62efa5ee1/fabulous-nature.jpg"
image[11].src = "http://2.bp.blogspot.com/-BNzMjXhqa5c/Te2RFA7NWgI/AAAAAAAAAVo/Jv6NZB1qFZ4/s1600/beijing+Songshan.jpg"
image[12].src = "http://2.bp.blogspot.com/__GPVmySbCtY/SM5gmBop62I/AAAAAAAAAUA/b07tAsJ_mEY/s400/nature-summer-wallpaper-22.jpg"
image[13].src = "http://1.bp.blogspot.com/_E0lrTQ7bI1Q/Sdiss6QL4LI/AAAAAAAAAgI/MLDVrT6SrOI/s400/Nature+Wallpapers+9.jpg"
image[14].src = "http://photography.naturestocklibrary.com/orca-stock-photo.jpg"
image[15].src = "http://2.bp.blogspot.com/-yO7L_hm-MKo/TW-ongr6jkI/AAAAAAAAGEI/SHe6bu0ihyA/s400/free-wallpapers-nature-846_001.jpg"
image[16].src = "http://2.bp.blogspot.com/_sx0Gt1J0RnM/Scw5mF5LR0I/AAAAAAAACO8/gz_XhyQ0mCg/s400/FunN2sHhWallPapers.Blogspot.com_HD.Digital.Nature_20.jpg"
image[17].src = "http://www.mobileapples.com/Assets/Content/Wallpapers/Natural%20Beauty%20In%20Cold.jpg"
image[18].src = "http://www.topchinatravel.com/pic/city/zhangjiajie/attractions/Tianzi-Mountain-Nature-Reserve-3.jpg"
image[19].src = "http://magickalgraphics.com/Graphics/Miscellaneous/Nature/nature48.gif"
滑过
var id;
var step = 1;
function nextphoto(){
step=(step+1)%size;
document.images.slide.src = image[step].src;
}
function lastphoto(){
step=((step-1)+size)%size;
document.images.slide.src = image[step].src;
}
function slideit()
{
step=(step+1)%size;
document.images.slide.src = image[step].src;
}
id = setInterval(slideit, 2000);
注意:如果您想添加更多图片,只需更改var size = 20;
行并添加image[??].src = "http://...";
答案 2 :(得分:1)
将功能修改为
function nextphoto(){
step=step+1;
slideIt();
}
//edit:style(below)
function lastphoto(){
step=step-1;
slideIt();
}
并尝试替换
document.images.slide.src = eval("image"+step+".src");
带
document.getElementByName('slide').src= eval("image"+step+".src");