图片库下一个和上一个按钮 [英] image gallery next and previous button

问题描述

检查此 http://jsfiddle.net/5VEeH/

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

[img] is small picture and [a] is big pictures for display. I want copy link from [a] href and that link be display image in '#display' div. next and previous button working and after last image start again from first picture.

推荐答案

不确定我明白你在找什么，但也许这就是它？

Not really sure I understand what you are looking for, but maybe this is it ?

$(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 表明它有效！

这篇关于图片库下一个和上一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！