자바 스크립트 슬라이더의 이미지에 개별 링크를 추가 할 수 없습니다.

Question

클라이언트 사이트에 javascrpit 슬라이더가 있습니다. 슬라이더에 개별 이미지를 연결하는 방법을 알 수 없습니다. 슬라이더는 완벽하게 작동하며 링크 문제 외에도 훌륭하게 작동합니다.

< --ul class = "items"-> (아래)에서 항목을 제거하면 찾을 수 있습니다. < --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 



     })   
}) 

웹 사이트 <a> 태그 jQuery로

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

Answer 1

랩 갤러리 이미지, 여기에 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를

팁 : 분명히

$(function() { 

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

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

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

    }); 

});