1

我正在制作一个简单的滑块来为我的一个朋友展示艺术品。我真的只熟悉 javascript/jquery，所以我现在不是 100% 习惯使用其他东西。

由于我的朋友没有任何编程知识，我试图让她更新的过程非常简单（即，每当她向文件夹添加新图像时自动创建新图像）。她会将图像上传到一个文件夹，并且必须对它们进行编号（即 1.jpg、2.jpg）。我的 javascript 使用 for 循环遍历数字（每当她添加新图像时，她都必须更新循环）并将它们插入到文件名中。然而，这限制了她只上传一种类型的文件。有没有办法只使用javascript来更改扩展名？

这是我到目前为止所拥有的：

function callImages(){
    //create the image div
    $('.artslider').append('<div class="image"></div>');

    //create the files array
    var files = [];

    //start the loop, starting position will have to be updated as images are added
    for (i=8;i>=0;i--){

        //create the img src for a jpg img
        var imgJPG = 'arts/'+i+'.jpg';

        //find the natural width of the image after it loads to see if it actually exists
        var imgWidth = $('imgJPG').load().naturalWidth;

        //if the width is undefined, replace the jpg extension with gif
        if (imgWidth===undefined){
            var imgGIF = imgJPG.replace('jpg', 'gif');
            files[i] = '<img src="'+imgGIF+'" class="artsliderimg"/>';
        }

        //otherwise keep the jpg extension
        else {
            files[i] = '<img src="'+imgJPG+'" class="artsliderimg"/>';
        }

        //then add the images to the img div
        $('.image').append(files[i]);
    }
};

这个 if/else 的问题是它只会创建一个 gif 图像。如果您切换顺序，它只会创建一个jpg图像。

编辑：这是此代码产生的内容：https ://googledrive.com/host/0B1lNgklCWTGwV1N5cWNlNUJqMzg/index.html

4

1 回答 1

1

问题在于这段代码：

var imgJPG = 'arts/'+i+'.jpg';
var imgWidth = $('imgJPG').load().naturalWidth;

imgWidth将始终未定义。

首先，您传递的是字符串 'imgJPG' 而不是参数imgJPG。其次我想你误解了 jQuery 选择器，它是用来选择 HTML 元素的，在这里输入一个文件路径不会有任何效果。第三，我认为您误解了该load功能，它用于将数据从服务器加载到 HTML 元素中。

我建议使用如下函数来检查图像是否存在：

function urlExists(url) {
  var http = jQuery.ajax({
    type:"HEAD",
    url: url,
    async: false
  });
  return http.status == 200;
}

然后在您的代码中：

if (!urlExists(imgJPG)){
    var imgGIF = imgJPG.replace('jpg', 'gif');
    files[i] = '<img src="'+imgGIF+'" class="artsliderimg"/>';
}
else {
    files[i] = '<img src="'+imgJPG+'" class="artsliderimg"/>';
}
于 2013-03-15T16:40:46.493 回答