javascript - 从文件夹加载所有图像并使用 Laravel 框架将它们滚动到 JS slider 中

Question

使用 Laravel 框架滚动 JS slider 中文件夹中的所有图像的最佳方法是什么？这是带有硬编码图像路径的当前代码:

  var i =0;
  var images = [
    'images/sliders/background_slider/2.jpg',
    'images/sliders/background_slider/3.jpg',
    'images/sliders/background_slider/1.jpg',
    'images/sliders/background_slider/4.jpg',
    'images/sliders/background_slider/5.jpg'];
  var image = $('#slideit');
  image.css('background-image', 'url(images/sliders/background_slider/1.jpg)');
  setInterval(function(){
   image.fadeOut(200, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000);
 });

这段代码运行良好，但我的想法是有一个选项可以轻松管理这些图片，而无需接触代码。我尝试创建一个包含所有图像路径的 PHP 变量，然后在 JS 中使用 json_encode 函数使用它，但这不起作用。另外，当我在 JS 变量中加载这些路径时，我可以轻松地在每个浏览器的源 View 中看到它们，我认为从安全 Angular 来看这不是一个好主意。

那么，最好的方法是什么？

提前致谢!

DT

Answer 1

如果您想在客户端 JS 中使用该变量，则无法隐藏该变量。这与对数组进行硬编码相同，唯一的区别是它将使用服务器端脚本呈现以使其动态。

所以，如果你的 php 变量是 $images，它应该看起来像这样:

$images = [
'images/sliders/background_slider/2.jpg',
'images/sliders/background_slider/3.jpg',
'images/sliders/background_slider/1.jpg',
'images/sliders/background_slider/4.jpg',
'images/sliders/background_slider/5.jpg'];

要将其传递到您的 View ，您可以执行以下操作:

$data['images'] = json_encode($images);

然后，在 View 中，您将从 php 变量中获取值，而不是对值进行硬编码。将 json 字符串转换回来:

var images = JSON.parse('<?=$images?>');

并且，将第一张图像设置为背景:

image.css('background-image', 'url('+images[0]+')');

更新:

我刚刚注意到您正在计算图像数组的元素，而您无法使用 JSON.parse 之后生成的对象来执行此操作。相反，您可以为每个对象元素创建一个键数组并对其进行计数。

images_keys= $.map(images, function(v, i){
    return i;
});

无论您在哪里需要images.length，都可以使用images_keys。对于其他一切，您可以使用图像对象本身。