时间戳

首页 > 解决方案 > 如何使用 backstretch 将 alt 标签添加到图像幻灯片？

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

问题描述

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

标签： javascriptjqueryjquery-backstretch

解决方案

你不需要添加任何东西，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>

推荐阅读