出问题了！JavaScript数组实现点击图片显示下一张效果

js代码如下：var image = new Array();
image[0]= "image/2.jpg";
image[1]= "image/A.jpg";
image[2]= "image/B.jpg";
image[3]= "image/C.jpg";
image[4]= "image/D.jpg";
image[5]= "image/E.jpg";
image[6]= "image/F.jpg";
function showPic() {
var pic = document.getElementById("picture");
var source = pic.getAttribute("src");
for(i=0;i<image.length;i++){
        if(source == image[i]){
source=image[i+1];
pic.setAttribute("src",source);}
}
}html页面中img部分如下<img  onclick="showPic(this);" src="image/2.jpg" alt="tupian"  id="picture" />
图片保存在image文件夹中分别为 2.jpg  A.jpg  B.jpg  C.jpg   D.jpg  E.jpg  F.jpg 但是有问题，无法按预想效果显示 求高手指导！

解决方案 »

  1.   

    这个在本地无法进行测试，如果不是通过http协议访问的话，返回的img.src会自动带上file:///路径，所以与数组中的值进行比较的话永远是不等的。
    函数也需要修改一下：
    function showPic() {
        var pic = document.getElementById("picture");
        var source = pic.src
        for (i = 0; i < image.length; i++) {
            if (source == image[i]) {
                source = image[(i + 1) % image.length]; //这里要进行模运算，否则最后一张时会造成数组键越界
                pic.src = source;
            }
        }
    }
      

  2.   

    本地测试可以这么做，上面的函数还有点问题，需要加上break;语句跳出for循环：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    var image = new Array();
    image[0]= "image/2.jpg";
    image[1]= "image/A.jpg";
    image[2]= "image/B.jpg";
    image[3]= "image/C.jpg";
    image[4]= "image/D.jpg";
    image[5]= "image/E.jpg";
    image[6]= "image/F.jpg";function showPic() {
        var pic = document.getElementById("picture");
        var source = pic.src
        for (i = 0; i < image.length; i++) {
            if (source.indexOf(image[i]) != -1) {
                source = image[(i + 1) % image.length];
                pic.src = source;
    break;
            }
        }
    }
    </script>
    </head><body>
    <img onclick="showPic(this);" src="image/2.jpg" alt="tupian"  id="picture" />
    </body>
    </html>
      

  3.   


    var image = new Array();
    image[0]= "images/1.jpg";
    image[1]= "images/2.jpg";
    image[2]= "images/3.jpg";
    image[3]= "images/4.jpg";
    image[4]= "images5.jpg";
    image[5]= "images/6.jpg";
    image[6]= "images/7.jpg";
    function showPic() {
    var pic = document.getElementById("picture");
    var source = pic.getAttribute("src");
    for(var i=0;i<image.length;i++){
    if(source == image[i]){
    source=image[i+1];
    pic.setAttribute("src",source);
    break;
    }
    }
    }这样就没问题了，试过了