Javascript 由于某些原因，无法在幻灯片中超链接图像

我有一个javascript幻灯片。我添加到我的页面，效果很好。我不是一个javascript开发人员，我在网上找到了解决方案。然而，我需要每个图像链接到某个地方，尽管它应该是多么简单，我无法让它工作。当我添加标签时，图像会消失…有人能帮忙吗？也许可以在javascript代码中添加一个额外的配置参数，以便输入URL

（函数（$）{
“严格使用”；
$.fn.sliderResponse=函数（设置）{
变量集=$.extend({
幻灯片地址：5000，
fadeSpeed:800，
自动播放：“关闭”，
显示箭头：“打开”，
隐藏者：“在”，
悬停缩放：“打开”，
标题栏：“关”
},
设置
);
变量$slider=$（此）；
var size=$slider.find（“>div”）.length；//幻灯片数量
var position=0；//carousal的当前位置
var sliderIntervalID；//用于清除自动播放
//为每张幻灯片添加一个点
$slider.append（“
”）；
$slider.find（“>div”）.each（函数（）{
$slider.find（“>ul”）.append（“
”）；
});
//在第一张幻灯片上播放
$slider.find（“div:type的第一个”）.addClass（“show”）；
//把.showLi放在第一个点上
$slider.find（“li:类型的第一个”）.addClass（“showli”）
//淡出除。显示以外的所有项目
$slider.find（“>div”）.not（“.show”）.fadeOut（）；
//如果自动播放设置为“开”，则启动它
如果（set.autoPlay==“打开”）{
startSlider（）；
}
//如果showarrows设置为“开”，则不要隐藏它们
如果（set.showArrows==“打开”）{
$slider.addClass（'showrows'）；
}
//如果hideDots设置为“开”，则隐藏它们
如果（set.hideDots==“开”）{
$slider.addClass（'hideDots'）；
}
//如果hoverZoom设置为“关闭”，则停止它
如果（set.hoverZoom==“关闭”）{
$slider.addClass（'hoverZoomOff'）；
}
//如果标题栏设置为“开”，则将其上移
如果（set.titleBarTop==“开”）{
$slider.addClass（'titleBarTop'）；
}
//功能启动自动播放
函数startSlider（）{
sliderIntervalID=setInterval（函数（）{
nextSlide（）；
}，set.slidePause）；
}
//鼠标悬停时停止自动播放
$slider.mouseover（函数（）{
如果（set.autoPlay==“打开”）{
clearInterval（sliderIntervalID）；
}
});
//在mouseout上启动自动播放
$slider.mouseout（函数（）{
如果（set.autoPlay==“打开”）{
startSlider（）；
}
});
//在右箭头上单击
$slider.find（“>.right”）。单击（nextSlide）
//在左箭头上单击
$slider.find（“>.left”）。单击（上一张幻灯片）；
//转到下一张幻灯片
函数nextSlide（）{
位置=$slider.find（“.show”）.index（）+1；
如果（位置>尺寸-1）位置=0；
交换转盘（位置）；
}
//转到上一张幻灯片
函数prevSlide（）{
位置=$slider.find（“.show”）.index（）-1；
如果（位置<0）位置=尺寸-1；
交换转盘（位置）；
}
//当用户单击滑块按钮时
$slider.find（“>ul>li”）。单击（函数（）{
位置=$（this.index（）；
changeCarousel（$（this.index（））；
});
//这将更改图像和按钮选择
函数更改转盘（）{
$slider.find（“.show”）.removeClass（“show”）.fadeOut（）；
$slider
.find（“>div”）
.eq（职位）
.fadeIn（set.fadeSpeed）
.addClass（“show”）；
//圆点
$slider.find（“>ul”）.find（“.showli”）.removeClass（“showli”）；
$slider.find（“>ul>li”）.eq（position）.addClass（“showli”）；
}
返回$slider；
};
})（jQuery）
您可以将其添加到页面底部
标记之前：

<script>
function visit(url){
    window.open(url, '_self');
}
</script>


功能访问（url）{
window.open（url，''u self'）；
}

然后，您可以将链接添加到div，如下所示：

<div style="background-image:url(cps-images/home-slider1a.png); background-color: #e0e1dd;" onclick="visit('https://www.google.com')"></div>

另一种解决方案是删除背景图像，在“div”中使用常规的“img”元素，然后将它们都包装在“a”元素中

在这种情况下，“img”应具有以下样式：

img {
  width: 100%;
  height: 100%;
  background-size: cover;
  }

您还可以包括
nbi home promo slider.js
？您可以提供一个工作的JSFIDLE吗？您可以将图像移动到
img
标记，并将其包装在div内的
a
标记中，如
。但你可能会从中得到一些其他奇怪的布局效果。如果没有一个完整的工作示例，很难判断。虽然这看起来是可行的，但它不是很容易访问的，因此可能应该使用
标记重新进行此解决方案非常有效！谢谢可访问性不是一个问题。但最后一件事，当光标悬停在图像上时，如何使光标变成“手形图标”？现在没有可见的指示它是可点击的。您可以在css中更改光标：