从文件夹中加载所有图像并使用 Laravel 框架将它们滚动到 JS 滑块中答案

【问题标题】：Load all images from folder and roll them in JS slider with Laravel framework从文件夹中加载所有图像并使用 Laravel 框架将它们滚动到 JS 滑块中
【发布时间】：2016-07-19 18:22:32
【问题描述】：

使用 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 变量，然后在带有 json_encode 函数的 JS 中使用它，但这不起作用。另外，当我在 JS 变量中加载这些路径时，我可以很容易地在每个浏览器的源视图中看到它们，我认为，从安全的角度来看，这不是一个好主意。

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

提前致谢！

D.T.

【问题讨论】：

标签： javascript php jquery laravel slideshow

【解决方案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'];

要将其传递给您的视图，您可以这样做：

$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。对于其他一切，您可以使用 images 对象本身。

【讨论】：