Question

使用 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。

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'];

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

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

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

1 个答案: