jQuery-如何在单击链接时更改图像src [英] JQuery - how can I change an image src on click of a link
本文介绍了jQuery-如何在单击链接时更改图像src的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用JQuery画廊显示具有不透明滑动描述的图像.我需要添加链接列表,以便用户可以覆盖单击链接时显示的图像. 单击链接后如何覆盖图库图像?
I am using a JQuery gallery to display an image with opaque sliding description. I need to add a list of links so that the user can override the image displayed on click of a link. How can I override the gallery image on click of the link?
$(document).ready(function() {
//Execute the slideShow
slideShow();
})
function slideShow() {
$('#gallery a').css({opacity: 0.0});
$('#gallery a:first').css({opacity: 1.0});
$('#gallery .caption').css({opacity: 0.7});
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
setInterval('gallery()',6000);
}
function gallery() {
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
var caption = next.find('img').attr('rel');
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
$('#gallery .content').html(caption);
}
<div id="gallery">
<a href="#" class="show">
<img src="images/storm2.jpg" alt="text in here" title="" width="480" height="260"
rel="<h3>Description</h3>description goes in here "</a> <a href="#">
<img src="images/storm1.jpg" alt="text in here" title="" width="480" height="260"
rel="<h3>Description 2</h3>" />
</a>...... ...... ......
<div class="caption">
<div class="content">
</div>
</div>
</div>
<div class="clear">
</div>
推荐答案
$("a.mylink").click(function(event){
$("img.myimage").attr("src","image2.jpg");
});
从链接中加载源代码也非常容易:
Loading the source from the link is very easy as well:
$("a.mylink").click(function(event){
event.preventDefault();
var newSRC = $(this).attr("href");
$("img.myimage").attr("src", newSRC);
});
这篇关于jQuery-如何在单击链接时更改图像src的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文