Question

如何在jQuery插件中插入指向图像滑块的链接？

我从http://www.jqueryscript.net/slider/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides.html

获得了滑块源代码

我尝试插入这样的链接：

<a href="www.google.coom"><img src="blablabla.jpg></a>

但是，它不起作用......（T ^ T）我在Chrome中重新检查（键F12）

<div class="tgtimg" style="position:absolute !important; height:600px !important; width:100% !important; background:#fff !important; z-index:1 !important; overflow:hidden !important"><img src="http://ikkorea.i.hhosting.kr/main/main_20150710_1.jpg" style="position: absolute; z-index: 1; top: 0px; left: -568.5px; height: 600px; display: block;" class="current"></div>

   <a href="http://search.naver.com/search.naver?sm=tab_hty.top&amp;where=nexearch&amp;ie=utf8&amp;query=%EC%9D%B5%EC%8A%A4%ED%8E%98%EB%94%94%EC%95%84+%EB%8F%84%EC%B0%A9"></a>

我该怎么办？

这是我的网站： http://www.istkunst.co.kr/preview/?dgnset_id=5834

Answer 1

改为使其成为tgtimg类的on click侦听器，它将自动重定向。

$('.tgtimg').click(function(){
      window.location = "url you want";
});

如果你真的绝望了，你可以使用这个可能的工作。

修改

您可能还想尝试jquery wrap方法。

$('.tgtimg').children('img').wrap('<a href="www.google.com"></a>');

Answer 2

您可以为要点击的所有图片添加全局class，并为data-link中的每个图片添加链接，如下所示：

HTML：

<div id="content">
    <img class="img_link" data-link="www.google.com" src="1.jpg">
    <img class="img_link" data-link="www.gmail.com"  src="2.jpg">
    <img class="img_link" data-link="www.yahoo.com"  src="3.jpg">
</div>

创建功能以处理点击图片并在调用data-link之后重定向到responsiveSlides()中存储的相关链接。

JS：

$(function(){

    var p=$('#content').responsiveSlides({
        ....
    });

    //Handling click event and redirecting to the related link
    $('.img_link').click(function(){
        window.location.replace($(this).data('link'));
    });

});

如何在jQuery插件中插入图像横幅滑块的链接？

2 个答案: