Question

这是我的HTML：

<div class = "slideshow">
                    <div class="cycle-slideshow" data-cycle-timeout=2000 data-cycle-fx="tileSlide" data-cycle-center-horz=true data-cycle-center-vert=true data-cycle-caption-plugin="caption2">
                        <!-- empty element for pager links -->
                        <div class="cycle-pager"></div>

                        <div class="cycle-overlay"></div>

                        <img src="images/slideshow/parallax1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
                        <img src="images/slideshow/parallax2.jpg" data-cycle-title="Albastrel6" data-cycle-desc="A youtuber which is earning milions by scratching his nose, while recording.">
                        <img src="images/slideshow/parallax3.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
                        <img src="images/slideshow/parallax4.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
                    </div>
                </div>

我想插入锚标记，这样，如果你按下一个图像，你将被发送到另一个页面，但我不知道如何...我使用jquery cycle 2插件来制作这个幻灯片。

每当我使用这样的锚标签时：

<a href="http://www.google.com"><img src="images/slideshow/parallax1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"></a>

我的幻灯片将显示列中的所有图像。 Like this.

Answer 1

<div class="pad-slider">
<div class="main-slider">
    <ul class="items">
        <li>
          <img src="http://img186.imageshack.us/img186/1866/halo3wallpaper1024copy9yf1.jpg" alt="" />
          <div class="slider-banner">
            <div class="imageLink" title="Click here to open Google IMAGES website." onclick="window.open('http://images.google.com/'); return true;"></div>
            <a href="http://www.google.com">
              <span>Click here to open Google MAIN website.</span>
            </a>
          </div>
        </li>
        <li>
          <img src="http://img91.imageshack.us/img91/6278/telagawarnalakewallpapew.jpg" alt="" />
          <div class="slider-banner">
            <div class="imageLink" title="Click here to open Bing IMAGES website."  onclick="window.open('www.bing.com/images/'); return true;"></div>
            <a href="http://www.bing.com">
              <span>Click here to open Bing MAIN website.</span>
            </a>
          </div>
        </li>
        <li>
          <img src="http://img393.imageshack.us/img393/9093/sky04jr4.jpg" alt="" />
          <div class="slider-banner">
            <div class="imageLink" title="Click here to open AltaVista IMAGES website"  onclick="window.open('http://images.search.yahoo.com/'); return true;"></div>
              <a href="http://us.altavista.com/">
                <span>Click here to open AltaVista MAIN website.</span>
              </a>
            </div>
        </li>
    </ul>
</div>

Demo

Answer 2

假设您没有每个图片的“标题”：

<div class = "slideshow">
   <div class="cycle-slideshow" data-cycle-timeout=2000 data-cycle-fx="tileSlide" data-cycle-center-horz=true data-cycle-center-vert=true data-cycle-caption-plugin="caption2">
       <!-- empty element for pager links -->
       <div class="cycle-pager"></div>

       <div class="cycle-overlay"></div>

       <a href = "https://www.google.com.sg/"><img src="images/slideshow/parallax1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"></a>
       <a href = "https://www.google.com.sg/"><img src="images/slideshow/parallax2.jpg" data-cycle-title="Albastrel6" data-cycle-desc="A youtuber which is earning milions by scratching his nose, while recording."></a>
       <a href = "https://www.google.com.sg/"><img src="images/slideshow/parallax3.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"></a>
       <a href = "https://www.google.com.sg/"><img src="images/slideshow/parallax4.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"></a>
   </div>
</div>

我在这里做的是用锚标记包装图像

Answer 3

找到它，我只需在data-cycle-slides="a"中添加<div class="cycle-slideshow">。

如何在此幻灯片中插入锚标记？

3 个答案: