[英]Image Gallery Thumbnails Slider
在這里,我嘗試創建圖像庫: http : //jsfiddle.net/L7yKp/1/
var xml = "<rss version='2.0'><channel> <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image> <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image> <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image> <limage>http://images1.videolan.org/images/largeVLC.png</limage> <limage>http://images1.videolan.org/images/largeVLC.png</limage> <limage>http://images1.videolan.org/images/largeVLC.png</limage> </channel></rss>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$image= $xml.find( "image" );
$limage = $xml.find("limage");
$( "#thumbs" ).append( $image.map(function(){
return $('<img>', {className: 'thumbnails', src:$(this).text()})[0];
}));
$( "#panel" ).append( $limage.map(function(){
return $('<img>', {className: 'largeimages', src:$(this).text()})[0];
})
);
單擊縮略圖時,我必須顯示更大的圖像。 因此,對每個縮略圖點擊相應的放大圖像將被顯示出來。 我需要協助。
參見http://jsfiddle.net/L7yKp/2/
var xml = "<rss version='2.0'><channel>"+
"<image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>"+
"<image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>"+
"<image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>"+
"<limage>http://images1.videolan.org/images/largeVLC.png</limage>"+
"<limage>http://images1.videolan.org/images/largeVLC.png</limage>"+
"<limage>http://images1.videolan.org/images/largeVLC.png</limage>"+
"</channel></rss>",
$xml = $( $.parseXML(xml) ),
$images=$([
//[elements, place, className],
[$xml.find("image") ,"#thumbs",'thumbnails'],
[$xml.find("limage"),"#panel" ,'largeimages']
]);
$images.each(function(){
var that=this;
that[0].each(function(){
$(that[1]).append($('<img>', {class: that[2], src:$(this).text()}));
});
});
$("#thumbs>img").click(function(){
$("#thumbs>img.clicked").removeClass('clicked');
$("#panel>img").hide();
$("#panel>img:nth-child("+Number($(this).index()+1)+")").fadeIn();
$(this).addClass('clicked');
});
$("#thumbs>img:first").click();
$('#next').click(function(){
$('#thumbs>img.clicked').next().click();
});
$('#prev').click(function(){
$('#thumbs>img.clicked').prev().click();
});
注意:我在圖像上添加了邊框,因為它們是相同的。
編輯:
你也可以加入
$('#next').click(function(){
$('#thumbs>img.clicked').next().click();
});
$('#prev').click(function(){
$('#thumbs>img.clicked').prev().click();
});
進入
$(['next','prev']).each(function(){
var that=this;
$('#'+that).click(function(){
$('#thumbs>img.clicked')[that]().click();
});
});
在這里查看: http : //jsfiddle.net/L7yKp/4/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.