我正在使用JQuery库来显示具有不透明滑动描述的图像.我需要添加一个链接列表,以便用户可以覆盖单击链接时显示的图像.如何在点击链接时覆盖图库图像?
$(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>
Run Code Online (Sandbox Code Playgroud)
$("a.mylink").click(function(event){
$("img.myimage").attr("src","image2.jpg");
});
Run Code Online (Sandbox Code Playgroud)
从链接加载源代码也非常简单:
$("a.mylink").click(function(event){
event.preventDefault();
var newSRC = $(this).attr("href");
$("img.myimage").attr("src", newSRC);
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
13523 次 |
| 最近记录: |