無法在JavaScript滑塊中添加單個圖像鏈接

我有一個客戶端網站的javascrpit滑塊，我無法弄清楚如何鏈接滑塊中的單個圖像。除了鏈接問題之外，滑塊功能完善並且工作良好。無法在JavaScript滑塊中添加單個圖像鏈接

我發現如果我從<刪除項目--ul class =「items」 - >（below）我能夠鏈接< --li - >圖像，並讓它們充當正常鏈接，但隨後我失去javaslider功能。我嘗試了一切。

我的目標是將每個圖像鏈接到網站上的相應頁面。共有4個圖像。我對這個東西很新，所以任何幫助都會很棒。

<script> 
    $(document).ready(function(){ 
     $('.gallery')._TMS({ 
     show:0, 
     pauseOnHover:true, 
     prevBu:'.prev', 
     nextBu:'.next', 
     playBu:'.play', 
     duration:700, 
     preset:'fade', 
     pagination:$('.img-pags').uCarousel({show:4,shift:0}), 
     pagNums:false, 
     slideshow:7000, 
     numStatus:true, 
     banners:false, 
     waitBannerAnimation:false, 
     progressBar:false 



     })   
})

網站使用jQuery在<a>標籤

<div class="container_12"> 
     <div class="grid_12"> 
     <div id="slide">     
      <div class="gallery"> 
      <ul class="items"> 

        <li><a href="about.html"><img src="images/gallery-big-1.jpg" alt="">  </a></li> 

        <li><img src="images/gallery-big-5.jpg" alt=""></li> 

        <li><img src="images/gallery-big-2.jpg" alt=""></li> 

        <li><img src="images/gallery-big-6.jpg" alt=""></li> 
       </ul> 

      </div> 
      <a href="#" class="prev"></a><a href="#" class="next"></a> 
     </div>  
     </div> 



#slide { width:940px; height:415px; position:relative; overflow:hidden; z-index:2; } 

.gallery { 
width:940px; 
position:relative; 
z-index:2 
} 
.items {display:none;} 
.pag { position:relative;} 
.img-pags {position:static; left:0px; z-index:1; display:block;} 
.img-pags ul {margin:0} 
.img-pags li { width:200px; height:170px; margin-right:20px; display:block;  overflow:hidden; } 
.img-pags li a {position:relative;display:block;border:#f4f4f4 5px solid; } 
.img-pags li a img {} 
.img-pags li a span{ display:block; background:#fff;} 
.img-pags li.active a,.img-pags li a:hover{border:#CCC 5px solid;} 
.img-pags li.active a img,.img-pags li a:hover img{} 
.prev {background:url(../images/prev-1.gif) 0 0 no-repeat; bottom:1px; left:1px;  display:block; position:absolute; width:44px;height:44px; z-index:9999;} 
.next{background:url(../images/next-1.gif) 0 0 no-repeat; bottom:1px; right:1px; display:block; position:absolute; width:44px;height:44px; z-index:9999;} 
.prev:hover, .next:hover {background-position: 0 bottom;}

來源

2013-03-18 timim

顯然你還沒有嘗試過「所有的一切」或者這將是加工。 :-)你使用什麼滑塊？小提琴怎麼樣？ http://jsfiddle.net/ – isherwood 2013-03-18 14:21:45

歡迎來到SO！ JSFiddle通常在我們的社區中受到讚賞。它有助於我們更好地理解你的代碼。 – span 2013-03-18 14:34:52

大聲笑。你是對的，感覺到目前爲止，我已經嘗試了我所知道的一切，這很少。我正在從一個模板開始工作，它在該集合中提供了（slider/uCarousel.js）。我得到了模板，並要求改變一些事情，讓小企業主感到高興。我非常理解HTML和CSS，但真的不知道JavaScript。 – timim 2013-03-18 14:43:42

裹畫廊圖像，這裏有一個Fiddle。

HTML

<div id="slide"> 

    <div class="gallery"> 

    <ul class="items"> 

     <li> 
     <img src="images/gallery-big-1.jpg" alt="" data-link="http://google.com" /> 
     </li> 
     <li> 
     <img src="images/gallery-big-5.jpg" alt="" data-link="http://jsfiddle.net" /> 
     </li> 
     <li> 
     <img src="images/gallery-big-2.jpg" alt="" data-link="http://stackoverflow.com" /> 
     </li> 
     <li> 
     <img src="images/gallery-big-6.jpg" alt="" data-link="http://api.jquery.com" /> 
     </li> 

    </ul> 

    </div> 

    <a href="#" class="prev"></a> <a href="#" class="next"></a> 

</div>

jQuery的

提示：在您的HTML </body>之前將這個

$(function() { 

    $('.gallery ul li img').each(function() { 

    var imgHref = $(this).attr('data-link'); 

    $(this).wrap('<a href="' + imgHref + '"</a>'); 

    }); 

});

來源

2013-09-04 22:17:53 mdesdev

無法在JavaScript滑塊中添加單個圖像鏈接

回答

相關問題