Question

所以旋转木马看起来像这样：

<div class="banners cycle-slideshow" id="carousel" data-cycle-fx="fadeout" data-cycle-slides="> img" data-cycle-timeout="5000" data-cycle-swipe="true">
  <img src=""/>
  <img src=""/>
  <img src=""/>
  <img src=""/>
</div>

但是，我希望每个图片都有链接，但是当我在每个图片周围放置一个<a href=""></a>，然后更改data-cycle-slides

时

data-cycle-slides="> img"

任何这些

data-cycle-slides="> a" 
data-cycle-slides="a"

它没有用。

相反，轮播将显示第一张图像，然后当下一张图像出现时，它只是空白，直到第一张图像再次出现。

有没有人通过malsup体验过Cycle 2 Carousel可以帮助我的经验？

Answer 1

我采用的方法是使用custom caption功能。我不知道这是否是“正确的”方法，但它对我有用，也许对你有用。

<div class="banners cycle-slideshow" id="carousel" data-cycle-fx="fadeout"   data-cycle-slides="> img" data-cycle-timeout="5000" data-cycle-swipe="true" data-cycle-caption="#adv-custom-caption" data-cycle-caption-template="<a href=&quot;{{url}}&quot;></a>">

   <div id="adv-custom-caption"></div>

   <img src="" data-url="First URL here"/>
   <img src="" data-url="Second URL here"/>
   <img src="" data-url="Third URL here"/>
   <img src="" data-url="Fourth URL here"/>

</div>

因此，这指定的标题只是一个链接，位于<div>标记中，其css标识为#adv-custom-caption。该ID的样式如下：

#adv-custom-caption {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 600;
    overflow: hidden;
}

#adv-custom-caption a{
    padding:100%;
}

方便地，.cycle-slideshow类已经设置为position: relative;，这使得在#adv-custom-caption上定义绝对定位没有问题。

现在，只需在每个图片代码的data-url属性中为每个图片添加要链接的网址，就应该全部设置。

为什么这个Cycle 2 malsup jquery轮播没有使用链接？

1 个答案: