Question

好的，所以我试图在滑块中为每张照片添加链接。我已经在其他两个网站上完成了这个，但是当我添加锚标签时，这个编码与另外两个不同。

<a href="http://www.google.com

我尝试将它放在HTML模板的不同部分，但它不起作用所以这是我的编码。我知道这可能是我想念的简单事情吗？

<div class="pad-slider">
        <div class="main-slider">
            <ul class="items">
                <li>
                    <img src="images/slide1.jpg" alt="" />
                    <div class="slider-banner"><span>The Next Level of Your Success</span></div>
                </li>
                <li>
                    <img src="images/slide2.jpg" alt="" />
                    <div class="slider-banner"><span>We offer Different Ways of Problem Solving</span></div>
                </li>
                <li>
                    <img src="images/slide3.jpg" alt="" />
                    <div class="slider-banner"><span>We craft practical solutions</span></div>
                </li>
            </ul>
        </div>
    </div>

如果您需要更多信息，请告诉我们。以下是我在主页上看到的Slider使用的模板网站：Link

Answer 1

您使用的特定 jQuery 滑块名为 TMSlider 0.4.1 ，如果您正确设置HTML，它允许SPAN文本成为链接。

此外，如果您希望实际图像成为链接（可能与上述链接相同或不同），则添加额外的div和一点CSS以实现该功能。

jsFiddle DEMO

HTML部分：

<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>
</div>

CSS部分：

.imageLink {
  width: 950px;
  height: 440px;
  margin-top: -440px;
  cursor: pointer;
}

调整添加的CSS的宽度和高度，使其与幻灯片大小匹配，但使用margin-top的负值除外。

备用链接格式：如果您希望单击的图像不打开单独的选项卡/窗口，则可以使用此语法将onclick事件用于相同的浏览器窗口。

onclick="window.location.href = 'http://www.bing.com/images/'; return true;"

Answer 2

一个老问题，但可能对其他试图解决问题的人有帮助。

只需在li标签中添加一个链接：

<li>
 <img src="banner.jpg" border="0" alt=""/>
 <div class="banner"> </div><a href="http://www.google.com" class="banner"></a>
</li>

在css中，添加：

a.banner {width:100%; height:100%; position:absolute}

来源：http://www.youtube.com/watch?v=0CyCyJkOD9Q&noredirect=1

如何在这个jQuery Slider插件中创建图像链接

2 个答案: