如何在此jQuery Slider插件中爲圖像創建鏈接

好吧，我正在嘗試向滑塊中的每張照片添加鏈接。我在其他2個網站上完成了它，但是當我添加錨定標記時，此編碼與另外兩個編碼不同。如何在此jQuery Slider插件中爲圖像創建鏈接

<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

來源

2012-12-09 Ryan Clark

您正在使用名爲TMSlider 0.4.1特定jQuery的滑塊和它允許SPAN文本如果您正確設置了HTML，就會成爲鏈接。另外，如果你想讓實際的圖像變成鏈接（可能與上面的鏈接相同或不同），然後添加一個額外的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;"

來源

2012-12-09 03:50:19 arttronics

非常感謝你，我所做的就是查看CSS並將滑塊橫幅更改爲清晰的png背景，然後刪除所有文本，並讓它只顯示圖片上的鏈接，所以非常感謝這麼多 –

它看起來像你不使用我的答案，但你自己的答案是非常不同的。這很好，你找到了你喜歡的答案，但是考慮根據你的解決方案創建一個答案，並接受你自己的答案。乾杯! – arttronics

您使用的特定滑塊不支持鏈接圖像。

它基本上分析只存儲標題和圖像的內容。你不能用它來鏈接和從頁面。

相反，也許你可以嘗試 this slider這確實允許鏈接到的圖片以及所有的事情你的滑塊支持

來源

2012-12-09 03:31:04 cjds

如果你還想讓這個滑塊可以使用鏈接，請參閱我的答案，該答案顯示了包含文本和圖像鏈接是多麼容易！乾杯! – arttronics

看看上面的註釋，然後在你的css代碼中取出滑塊橫幅並將png清空爲一個空的png文件，然後複製滑塊橫幅css代碼並製作另一個我命名我的滑塊banner_2，然後將顏色png與那個所以現在當我想要圖片有沒有文字的鏈接我使用滑塊橫幅，當我想要文本我使用滑塊banner_2它的作品令人驚歎 –

老兄，我認爲你把這加到錯誤的答案。這裏沒有CSS :-P – cjds

一個老問題，但可能有助於其他人試圖解決相同的問題。

只需添加李標籤中的鏈接：

<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-25 05:28:06 Pexsol

-1

只是看視頻：http://www.youtube.com/watch?v=0CyCyJkOD9Q（即使我不喜歡這個插件的代碼）。這裏有一些很好的替代方案：http://designshack.net/articles/freebies/30-innovative-new-jquery-plugins/

來源

2013-10-29 21:01:14 centurian

如何在此jQuery Slider插件中爲圖像創建鏈接

回答

相關問題