如何使用 backstretch 将 alt 标签添加到图像幻灯片？答案

【问题标题】：How do I add alt tags to an image slideshow using backstretch?如何使用 backstretch 将 alt 标签添加到图像幻灯片？
【发布时间】：2020-03-04 19:13:10
【问题描述】：

我正在尝试使用 backstretch 将 alt 标签添加到图像幻灯片，但我下面的代码不起作用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/min/jquery.backstretch-min.js"></script> 
<script>
    $.backstretch([
     { url: "img/hero/hero11.jpg", alt: "Some alt text" }, 
     { url: "img/hero/hero10.jpg", alt: "Some alt text 2" },
    ],  {duration: 2000, fade: 750});
  });
});

</script>

我将此添加到 jquery.backstretch-min.js：

 $(document).ready(function() { $('.backstretch img').attr('alt', 'this is a purple background image'); });

它适用于第一张图片，但是当幻灯片切换到下一张图片时，alt标签会消失并且永远不会重新加载。

reeljanie.com供参考，首页幻灯片需要有alt标签。

我对js很陌生，谢谢你的帮助。

【问题讨论】：

你能分享一个工作小提琴吗？

标签： javascript jquery jquery-backstretch

【解决方案1】：

您无需向jquery.backstretch-min.js 添加任何内容，因为它支持alt pretty well。

您只需要修复由于最后两行而出现语法错误的 JS。
只需删除它们：

    $.backstretch([
     { url: "https://picsum.photos/400/230", alt: "Some alt text" }, 
     { url: "https://picsum.photos/400/230", alt: "Some alt text 2" },
    ],  {duration: 2000, fade: 750});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.1.18/jquery.backstretch.min.js"></script>

【讨论】：

谢谢！但这对我不起作用。我认为这可能与我的backstretch file 有关。加载 src backstretch 文件时，图像不会显示在正确的位置
@JasonLee，是的，您的backstretch 版本已损坏。您必须下载原始版本。