Javascript 从文件夹中加载所有图像，并使用Laravel框架在JS滑块中滚动它们

使用Laravelframework从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变量中加载这些路径时，我可以在每个浏览器的源代码视图中轻松地看到它们，我认为，从安全角度来看，这不是一个好主意

那么，最好的方法是什么

提前谢谢

---

D.T.

如果要在客户端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'];

要将其传递给您的视图，您可以执行以下操作：

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

然后，在视图中，您将从php变量获取值，而不是硬编码值。将json字符串转换回：

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

更新：

我刚刚注意到您正在计算图像数组的元素，这是在

JSON.parse

之后生成的对象无法完成的。相反，您可以为每个对象元素创建一个键数组，并对其进行计数

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

---

无论您需要

images.length

，都可以使用

images\u键

。对于其他一切，您都可以使用images对象本身。

如果要在客户端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'];

要将其传递给您的视图，您可以执行以下操作：

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

然后，在视图中，您将从php变量获取值，而不是硬编码值。将json字符串转换回：

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

更新：

我刚刚注意到您正在计算图像数组的元素，这是在

JSON.parse

之后生成的对象无法完成的。相反，您可以为每个对象元素创建一个键数组，并对其进行计数

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

无论您需要

images.length

，都可以使用

images\u键

。对于其他所有内容，可以使用图像对象本身