0

我一直在研究以下链接http://fredhq.com/projects/roundabout/中提供的图像回旋处插件，除了我点击哪个链接之外，一切都工作正常；无论是前面还是后面，环形交叉路口确实会滑到前面，但随后会将您带到您刚刚单击的图像的链接......因此使环形交叉路口几乎毫无用处。

我不久前才刚刚开始学习 jQuery，而且经验不足，觉得我可能在这里遗漏了一些简单的东西。我只希望环形交叉路口前面的图像链接到其必要的页面。当我单击前面的任何其他图像时，我只希望环形交叉路口将该图像摆动到前面，然后当该图像位于前面时启用单击链接

以下是我到目前为止所拥有的

HTML

<section id="carousel">
<ol class="next">
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-1.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-2.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-3.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-4.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-5.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-6.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-7.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-8.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-9.png"></a></li>
    <li><a href="http://google.com"><img src="assets/images/carousel-item-10.png"></a></li>
    <li><a href="http://bandonthewall.org/"><img src="assets/images/carousel-item-11.png"></a></li>
</ol>
</section>

查询

$(document).ready(function() {
      $('ol').roundabout({
         btnNext: ".next",
        enableDrag: true,
      });

   $('a').click(function(e){
        link = $(this).attr("href");
        location.href=link;
    });  });

我真的很感激这方面的帮助

谢谢

4

1 回答 1

1

而不是这个块：

$('a').click(function(e){
    link = $(this).attr("href");
    location.href=link;
});

尝试这个：

$('.roundabout-moveable-item a').click(function(e){
    if($(this).parent('li').hasClass('roundabout-in-focus')) {
        link = $(this).attr("href");
        location.href=link;
    }
    else {
        e.preventDefault();
    }
});

我所做的是测试a的父li元素是否是前面的当前元素（这是由插件的 class 指定的.roundabout-in-focus）。如果是，则允许链接通过。如果不是（如果它是后面的任何一个），则阻止链接激活。

让我知道这个是否奏效。我对插件不是很熟悉，这是基于快速研究。如果它确实有效，这是上面块的一个更苗条的替代版本：

$('.roundabout-moveable-item a').click(function(e){
    if(!$(this).parent('li').hasClass('roundabout-in-focus')) {
        e.preventDefault();
});
于 2012-07-05T16:01:53.310 回答