从文件夹中加载所有图像，并使用Laravel框架在JS滑块中滚动它们 - Load all images from folder and roll them in JS slider with Laravel framework

Load all images from folder and roll them in JS slider with Laravel framework

使用Laravel框架从JS滑块中的文件夹中滚动所有图像的最佳方式是什么？这是具有硬编码图像路径的当前代码：

  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?>');

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

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

更新：

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

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

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