Question

我使用的是一个http://www.menucool.com/slider/thumbnail-slider-demo-2的插件。但我想实现可点击的图像。

在此插件中，通过锚标记显示图像，如下所示：

<div style="padding:120px 0;">
        <div id="thumbnail-slider">
            <div class="inner">
                <ul>
                    <li>
                        <a class="thumb" href="img/6.jpg"></a>
                    </li>
                    <li>
                        <a class="thumb" href="img/7.jpg"></a>
                    </li>
               </ul>
          </div>
       </div>
  </div>

我想在点击此图片后重定向页面。给我一些关于这个的想法。使用此插件可以使用图像点击制作锚标记吗？给我一些想法。
感谢

Answer 1

而不是使用

<a class="thumb" href="img/6.jpg"></a>

你可以使用

<a class="thumb" href="img/6.jpg"><img src="img/6.jpg" alt="" /></a>

在锚标记中，如果要将其重定向到任何网址，也可以更改href属性，如下所示：

 <a class="thumb" href="http://www.google.com"><img src="img/6.jpg" alt="" /></a>

Answer 2

如果我理解正确，你只需要听click事件，然后做你想做的事。

在下面的演示中，如果您点击前幻灯片，它将重定向到谷歌。如果没有，它什么都不做。如果您想在任何图片上click时重定向，只需删除检查前面图片的if语句：

注意：由于安全原因，它不会执行重定向，因此您可以在此bin中看到它。

＆＃13;

[].forEach.call(document.querySelectorAll('.thumb'), function(a) {
  a.addEventListener('click', function(event) {
    // Check if the image in the front
    if (this.parentNode.classList.contains('active')) {
      location.href = this.dataset.href;
    }
  });
});

＆＃13;

<link href="http://www.menucool.com/slider/thumb/2/thumbnail-slider.css" rel="stylesheet" />
<script src="http://www.menucool.com/slider/thumb/2/thumbnail-slider.js"></script>
<div id="thumbnail-slider">
  <div class="inner">
    <ul>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/6.jpg" data-href="http://google.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/7.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/2.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/3.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/4.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/5.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/8.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/9.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/10.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/11.jpg" data-href="http://facebook.com"></a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

http://jsbin.com/vikejo/2/edit?html,js,output

修改要重定向到每个图片的不同网址，您可以添加data-属性，在这种情况下为data-href，然后，当用户点击图片时，他会重定向到该网址，该网址是属性的值

链接

<a class="thumb" href="http://www.menucool.com/slider/thumb/img/6.jpg" data-href="http://google.com"></a>

在点击事件中

location.href = this.dataset.href;

Answer 3

使用此

<li><a href="/"><img class="thumb" src="1.jpg" style="height:auto;" /></a></li>

来源： - http://www.menucool.com/jquery-slider

Answer 4

<div style="padding:120px 0;">
    <div id="thumbnail-slider">
        <div class="inner">
            <ul>
                <li>
                    <a class="thumb" href="#target_url"><img src="img/6.jpg"></a>
                </li>
                <li>
                    <a class="thumb" href="#target_url"><img src="img/7.jpg"></a>
                </li>
           </ul>
      </div>
   </div>

在标签内使用图片标签将图像显示为超链接

Answer 5

<a class="thumb" href="#target_url"><img src="img/6.jpg"></a>

这是简单而直截了当的答案

使用可点击的图像制作锚标记

5 个答案: