我有以下代码。jquery链接到一个外部网页
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
var galleryClass = '.gallery';
$(galleryClass+' li img').click(function(){
var $gallery = $(this).parents(galleryClass);
$('.main-img',$gallery).attr('src',$(this).attr('src').replace('thumb/', ''))
.parent().attr('href',$(this).parent().attr('href'));
});
var imgSwap = [];
$(galleryClass+' li img').each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
以下HTML代码。
<div class="gallery">
<img src="gallery/img_1.png" alt="" class="main-img" />
<img src="images/Select-Brands.jpg" width="1010" height="50" />
<ul>
<li><img src="gallery/thumb/img_1.png" alt="" /></li>
<li><img src="gallery/thumb/img_2.png" alt="" /></li>
<li><img src="gallery/thumb/img_3.png" alt="" /></li>
<li><img src="gallery/thumb/img_4.png" alt="" /></li>
<li><img src="gallery/thumb/img_5.png" alt="" /></li>
<li><img src="gallery/thumb/img_6.png" alt="" /></li>
<li><img src="gallery/thumb/img_7.png" alt="" /></li>
<li><img src="gallery/thumb/img_8.png" alt="" /></li>
<li><img src="gallery/thumb/img_9.png" alt="" /></li>
</ul>
</div>
这是网站的例子。 http://flairnecessities.com/AskarBrands/askarbrands.html 当你点击每个标志时,它会产生一个新的图像。我想每个大图像(其中8个)转到8个独立的外部网站。他们还需要打开一个单独的窗口。
这样做需要什么代码?谢谢!
感谢您的评论周杰伦。这样做实际上会使较小的徽标(栏中的徽标)链接到外部网页,而不是上面的较大图像。我希望当您点击较小的徽标时,他们会更改上面的较大图片,当您点击较大的图片时,会将您带到该公司的网站。 – user3092524
已更新对jsfiddle的混淆链接感到抱歉:http://jsfiddle.net/B7EX9/ –