如何使用 backstretch 向图像幻灯片添加 alt 标签？

Question

我正在尝试使用 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 很陌生，谢谢你的帮助。

Answer 1

你不需要向jquery.backstretch-min.js添加任何东西，因为它很好地支持alt 。

您只需要修复由于最后两行而出现语法错误的 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>