Question

我有缩略图图片的图库滑块。

我需要通过链接打开滑块外部的滑块图像。所以我尝试了这段代码。

但是当我点击侧面链接时，它总是只打开第一张幻灯片图像。

$(window).click(function(){
  var target="#1";  
  $('a[href='+target+']').click()
})

当我点击第一个拇指时，它会触发＃1，但是当我点击第2个，第3个第4个......拇指时，它再次触发相同的＃1。但是当我点击第二个拇指时，我需要打开＃2 ....

我将此代码用于外侧缩略图。这段代码有什么不对。

    <div class="main">
                    <a href="#1"><img src="images/thumbs/c1.jpg" data-largesrc="images/large/c1.jpg" alt="image01"/></a>
                    <a href="#2"><img src="images/thumbs/c2.jpg" data-largesrc="images/large/c2.jpg" alt="image02"/></a>
                    <a href="#3"><img src="images/thumbs/c3.jpg" data-largesrc="images/large/c3.jpg" alt="image03"/></a>
</div>

此滑块工作正常。但我需要从滑块的外侧单击此缩略图，以触发滑块的每个图像。

<ul class="thumb">
   <li><img src="images/thumbs/c1.jpg"  /></li>
   <li><img src="images/thumbs/c2.jpg"  /></li>
   <li><img src="images/thumbs/c3.jpg"  /></li>
</ul>

当我点击.thumb时，目标必须是主要的。

Answer 1

要手动触发任何事件，您需要使用trigger（）方法。请尝试以下。

$('body').on("click",".thumb li", function(){
    var target= $(this).attr("data-ref");  // target will give you #1 or #2 or #3
    $('.main a[href='+target+']').trigger('click');

});

<ul class="thumb">
   <li data-ref="#1"><img src="images/thumbs/c1.jpg"  /></li>
   <li data-ref="#2"><img src="images/thumbs/c2.jpg"  /></li>
   <li data-ref="#3"><img src="images/thumbs/c3.jpg"  /></li>
</ul>

FIDDLE

通过缩略图从外部触发图库滑块

1 个答案: