javascript - 无法在 javascript slider 中添加指向图像的单独链接

Question

我有一个用于客户站点的 javascrpit slider ，但我不知道如何链接 slider 中的各个图像。 slider 功能齐全，除了链接问题外效果很好。

我发现如果我从 <--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 



      })        
 })

网站

    <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

在 <a> 中使用 jQuery 包装图库图像标签，这里是一个 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

提示:把这个放在</body>之前在你的 HTML 中

$(function() {

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

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

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

  });

});