javascript - anchor 标记不适用于图像 http ://www. smoothdivscroll.com/demo.html

Question

实际上我正在尝试将 anchor 标记与此 slider 图像一起使用

<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>

但是当我这样做时，它的无效图像没有显示出来？我不想要替代方法.. 这个 slider 有什么问题？最后两张图片没有问题.. 当我删除 anchor 标签时一切都很好，但我需要这个。谢谢。

这在 html 上工作正常，但在我使用的 slider 上却不行，它是 http://www.smoothdivscroll.com/demo.html使用本网站的 js 和 css我正在使用每个循环来回显图像地址和链接地址。

Answer 1

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

例如参见 fiddle :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; 
}

Javascript

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