html＆amp; javascript幻灯片无效（按钮）

时间：2014-03-08 08:31:44

标签： javascript html slideshow

点击按钮后，照片不会改变。

代码：

<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>

解决方案：http://jsfiddle.net/pMb6X/3/

3 个答案:

答案 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");
相关问题
最新问题