6

Hi Ive just swapped from Keyframes to Cycle2 (http://jquery.malsup.com/cycle2/) as a way of slideshowing images , I swapped to cycle2 as i believed this would allow me to make the images links , I only need one of the images to a link not all of them so when the slideshow gets to the slide the link is active , 

 <img src="/images/promo1.jpg">
 <img src="/images/promo2.jpg">
 <img src="/images/promo3.jpg">
 <img src="/images/promo4.jpg">

this works fine slideshows perfect, soon at i try 

<a href="http://www.google.co.uk">
 <img src="images/promo2.jpg"></a>

on just one of the images , it knocks it out of the slideshow and displays it underneath as its own image.

any help appreciated

Thanks

4

2 回答 2

10

来自 Cycle2 常见问题

我想使用不是图像的幻灯片。我如何告诉 Cycle2 我的幻灯片是什么？

使用 data-cycle-slides 属性提供一个 jQuery 选择器，用于标识容器中的幻灯片元素。例如，如果您的幻灯片是带有 li 幻灯片的 ul，您可以像这样设置属性： data-cycle-slides="li"

<ul class="cycle-slideshow" data-cycle-slides="li">
    <li><img src="path/to/some/image1.jpg"></li>
    <li><img src="path/to/some/image2.jpg"></li>
    <li><img src="path/to/some/image3.jpg"></li>
</ul>

在您的情况下，您可能需要以下内容：

<ul class="cycle-slideshow" data-cycle-slides="li" data-cycle-fx="scrollHorz">
    <li><a href="http://www.example.com"><img src="http://placehold.it/350x150"/></a></li>
    <li><a href="http://www.example.com"><h2>This is a non-image slide</h2></a></li>
    <li><a href="http://www.example.com"><img src="http://placehold.it/350x150"/></a></li>
    <li><a href="http://www.example.com"><h2>This is a non-image slide</h2></a></li>
</ul>

工作示例

于 2013-05-10T15:21:53.030 回答
0

指定协议是正确的 - “http://”

<ul class="cycle-slideshow" data-cycle-slides="li">
    <li><a href="http://www.google.co.uk"><img src="path/to/some/image1.jpg"></a></li>
    <li><a href="http://www.google.co.uk"><img src="path/to/some/image2.jpg"></a></li>
    <li><a href="http://www.google.co.uk"><img src="path/to/some/image3.jpg"></a></li>
</ul>
于 2013-10-09T15:13:18.373 回答