Question

我在这里尝试创建一个图库： 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];
    })
);

我必须在点击缩略图时显示更大的图像。因此，在点击每个缩略图时，将显示相应的较大图像。我需要一些帮助。

Answer 1

请参阅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/

图库缩略图滑块

1 个答案: