Question

我一直在研究以下链接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>

JQUERY

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

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

我真的很感谢帮助

由于

Answer 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元素是否是前面的当前元素（这是由插件的类.roundabout-in-focus指定的）。如果是，则允许链接通过。如果不是（如果它是后面的任何一个），那么阻止链接激活。

如果有效，请告诉我。我对这个插件不太熟悉，这是基于快速研究。如果它确实有效，这里是上面块的一个更纤薄的替代版本：

$('.roundabout-moveable-item a').click(function(e){
    if(!$(this).parent('li').hasClass('roundabout-in-focus')) {
        e.preventDefault();
});

jQuery图像环形交叉口仅用于链接前端图像

1 个答案: