我有一个用于客户站点的 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
})
})
网站
<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;}