Question

[img]是小图片，[a]是用于显示的大图片。我希望从[a] href复制链接，该链接是'#display'div中的显示图像。下一个和上一个按钮工作，最后一张图像从第一张图片开始。

Answer 1

我不确定我理解你在寻找什么，但也许这就是它？

$(document).ready(function() {
    var E = $("a", "#img-list"), N = 0, T = E.length-1;

    $("#display").html('<img src="'+$(E[N]).attr('href')+'" />');
    $('#next, #prev').on('click', function() {
        var A = this.id == 'next',X=A?T:0,Y=A?0:T,Z=A?N+1:N-1;N=N==X?Y:Z;
        $("#display").html('<img src="'+$(E[N]).attr('href')+'" />');
    });
    E.on('click', function(e) {
        var S = $(this).attr('href');
        $("#display").html('<img src="'+S+'" />');
        e.preventDefault();
    });
});

这是FIDDLE以显示它有效！

Answer 2

这是我的版本，适合初学者。我也是初学者：）

http://jsfiddle.net/5VEeH/6/

JS

$(function() {

    $('#listimg img').each(function(i){
    var img = $(this);
    img.attr('num',i).attr('id','img'+i);
     img.click(function(){
     $('.active').removeClass('active');
     img.addClass('active');
     $('.display').hide().attr('src',this.src).fadeIn();
     });
    });

    $('#img0').addClass('active');
    $('.display').hide().attr('src',$('#img0').attr('src')).fadeIn();

        $('#next').click(function(){
      var imgnext = $('.active');
      var idnext = Number(imgnext.attr('num'))+1;
      var last= $('#listimg img').length;
       if(idnext==last){}
                else{
      var srcn = $('#img'+idnext).attr('src');
     $('.active').removeClass('active');
      $('#img'+idnext).addClass('active');
            $('.display').hide().attr('src',srcn).fadeIn();}

     });
            $('#prev').click(function(){
      var imgnext = $('.active');
      var idnext = Number(imgnext.attr('num'))-1;
                if(idnext=="-1"){}
                else{
                      var srcn = $('#img'+idnext).attr('src');
      $('.active').removeClass('active');
       $('#img'+idnext).addClass('active');
       $('.display').hide().attr('src',srcn).fadeIn();}


     });

});

HTML

<div id="display"> <img class='display' src="" /></div>
    <button id="prev">prev</button>
    <button id="next">next</button>
<div id='listimg'>
     <img src="http://3.bp.blogspot.com/-tGWtjEA6S-0/Tr3KpPLtLSI/AAAAAAAADaY/VBCrqP1_Gm8/-c/" />
    <img src="http://img543.imageshack.us/img543/47/img1td.png" />
     <img src="http://3.bp.blogspot.com/-tGWtjEA6S-0/Tr3KpPLtLSI/AAAAAAAADaY/VBCrqP1_Gm8/-c/" />
    <img src="http://img543.imageshack.us/img543/47/img1td.png" />
     <img src="http://3.bp.blogspot.com/-tGWtjEA6S-0/Tr3KpPLtLSI/AAAAAAAADaY/VBCrqP1_Gm8/-c/" />
    <img src="http://img543.imageshack.us/img543/47/img1td.png" />


</div>

图片库下一个和上一个按钮

2 个答案: