试图让我的翻转更改 src 翻转。这工作正常,虽然有一个错误。单击缩略图后,src 有时可能包含错误的 src(即使鼠标悬停,鼠标悬停状态仍保持不变)。. 要查找错误,请单击一些缩略图并将鼠标悬停在一些缩略图上,您应该会看到已单击的鼠标悬停 src 仍然存在。演示不再可用,对不起!
jQuery -
function image_gallery (){
if ($('ul.thumbs').length > 0) {
$('.gallery').each(function(){
$('ul.thumbs li img:gt(0)').addClass('unselected');
$('ul.thumbs li img:eq(0)').addClass('selected');
function mouse_overs () {
var unselected = $('li img.unselected');
unselected.hover(function(){
var thumb = $(this);
thumb.attr('src',thumb.attr('src')
.replace(/([^.]*\d)\.(.*)/, "$1r.$2"));
}, function(){
var thumb = $(this);
thumb.each(function(){
$(this).attr('src',$(this)
.attr('src').replace('r.jpg','.jpg'));
});
});
};
mouse_overs();
var img_main = $(this).find('img.main:first');
$(this).find('ul.thumbs img').each(function(){
$(this).click(function(){
var thumb = $(this);
var src = thumb.attr('src');
if ( src.indexOf('r.jpg') == -1) {
$(this).attr('src',thumb.attr('src')
.replace(/([^.]*)\.(.*)/, "$1r.$2"));
}
var selected = $('ul.thumbs li img.selected');
// previous img remove r.jpg
selected.attr('src',selected.attr('src')
.replace('r.jpg','.jpg'));
selected.removeClass('selected');
selected.addClass('unselected');
//current thumb add class "selected", remove "unselected"
thumb.addClass('selected');
thumb.removeClass('unselected');
mouse_overs();
var rel = $(this).parent('a').attr('rel');
img_main.fadeOut(500, function(){
img_main.attr('src', rel);
img_main.fadeIn('slow');
});
thumb.mouseout(function(){
var src = $(this).attr('src');
if ( src.indexOf('r.jpg') == -1) {
$(this).attr('src',thumb.attr('src')
.replace(/([^.]*)\.(.*)/, "$1r.$2"));
}
else return false;
});
});
});
});
}
}
的HTML:
<div class="gallery">
<img class="main" src="images/gallery/yes-campaign/NL1.jpg"/>
<ul class="thumbs">
<li><a rel="images/gallery/yes-campaign/NL1.jpg"><img src="images/thumbs/yes-campaign/NL-1r.jpg"/></a></li>
<li><a rel="images/gallery/yes-campaign/NL2.jpg"><img src="images/thumbs/yes-campaign/NL-2.jpg"/></a></li>
<li><a rel="images/gallery/yes-campaign/NL3.jpg"><img src="images/thumbs/yes-campaign/NL-3.jpg"/></a></li>
<li><a rel="images/gallery/yes-campaign/NL4.jpg"><img src="images/thumbs/yes-campaign/NL-4.jpg"/></a></li>
</ul>
</div>
该 HTML 在整个页面中重复多次。翻转状态为 NL1r.jpg、NL2r.jpg 等。图像组织在文件夹中,因此所有图像文件名使用相同的命名约定。