Question

我正在设置iPad-Kiosk，需要以幻灯片形式循环播放图像。现在我使用这个非常基本的代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery.cycle2.min.js"></script>
  </head>
  <body>
  <div class="cycle-slideshow">
    <img src="img/01.jpg">
    <img src="img/02.jpg">
    <img src="img/03.jpg">
    <img src="img/04.jpg">
    <img src="img/05.jpg">
    <img src="img/06.jpg">
    <img src="img/07.jpg">
    <img src="img/08.jpg">
    <img src="img/09.jpg">
    <img src="img/10.jpg">
    <img src="img/11.jpg">
    <img src="img/12.jpg">
    <img src="img/13.jpg">
    </div>
  </body>
</html>

但我真正想要的是自动加载文件夹中的所有图像文件。如何使用ajax / jQuery填充图像文件名列表？可悲的是我不能用php。

谢谢！

Answer 1

在这里，你需要循环遍历带有变量的文件夹以检查数字，并通过ajax调用来查看文件是否存在：

var image=1;
function appendImage(){
    if(image<=9) image='0'+image;
    $.ajax({
        url:'img/'+image+'.jpg',
        type:'HEAD',
        success: function()
        {
            $('.cycle-slideshow').append('<img src="img/'+image+'.jpg">');
            image=parseInt(image)+1;
            appendImage();
        }
    });
};

Answer 2

var image=1;

function checkImage(src) {
     var img = new Image();
     img.onload = function() {
     $('.cycle-slideshow').cycle('add','<img src="'+src+'">');
        };
 img.src = src;
}

function appendImage(){
            if(image<=9) 
                image='0'+image;
            var src = 'img/' +image+ '.jpg';
            checkImage(src);
            image=parseInt(image)+1;
};

这就是我最终做到的。这个解决方案的一个缺点是我调用appendImage（）大约100次，只是假装没有更多的图像。在我的项目中没问题，因为无法加载更多图像，但这是一个非常粗糙的解决方案。

cycle2，文件夹为image-source

2 个答案: