2

好的，所以我正在尝试在滑块中添加指向我的每张照片的链接。我已经在其他 2 个网站上完成了它，但是当我添加锚标记时，这个编码与其他 2 个不同。

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

如果您需要更多信息，请告诉我。这是我与在主页上实时看到的滑块一起使用的模板网站：链接

4

2 回答 2

3

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

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

jsFiddle 演示

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 的宽度和高度，使其与您的 Sliders 大小匹配，但使用负值margin-top.

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

onclick="window.location.href = 'http://www.bing.com/images/'; return true;"
于 2012-12-09T03:50:19.480 回答
0

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

只需在 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

于 2013-10-25T05:28:06.717 回答