定位标记不适用于图像 http://www.smoothdivscroll.com/demo.html

Question

实际上，我正在尝试在此滑块图像中使用锚标记

<div class="smallsliderdiv">
<p class="smallslider"> Top websites </p>
<div id="makeMeScrollable">
<a href="google.com"><img width="400px" height="300px" src="g1.jpg"/></a>
<a href="fb.com"><img width="400px" height="300px" src="g2.jpg"/></a>
<a href="android.com"><img width="400px" height="300px" src="g3.jpg"/></a>
<img width="400px" height="300px" src="k1.jpg"/>
<img width="400px" height="300px" src="k2.jpg"/>
</div> 
<div>

但是当我这样做时，它不起作用的图像没有显示？ 我不想要替代方式..这个滑块有什么问题？？ 最后两张图片没有问题..当我删除锚标签时，一切都很好，但我需要这个。谢谢。

这适用于 html，但不适用于我正在使用的滑块，该滑块 http://www.smoothdivscroll.com/demo.html 使用此站点的 js 和 css并且我用于每个循环回显图像地址和链接地址。

Answer 1

这就是我会这样做的，因为您的.js或.css滑块文件可能在使用锚标记包装图像时存在问题，因此您可以使用 onclick 事件添加到 img 并让 javascript 链接图像，而不是用锚点包装图像。 并手动将光标更改为 CSS 中的指针。

例如，请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/47/

.html

<img onclick="image1()" width="400px" height="300px" src="http://lorempixel.com/400/200/"/>

.CSS

#makeMeScrollable > img:hover{
  cursor: pointer; 
}

爪哇语

function image1(){
window.location.href = 'www.google.com';
}