Question

我正在使用JQuery创建一个简单的图像导航器。

因此，例如，如果我们总共有3张图片，它将看起来像这样：

Prev 1 2 3 Next

我正在使用.hide()函数和.click()来实现此目的。

因此，每次单击一个导航选项时，都会显示一个图像，其余图像将被隐藏。

我得到了“1 2 3”链接。

我遇到了“Prev”和“Next”的问题。

我必须为他们做一个环绕。因此，如果我在“1”并按“上一个”，我必须转到“3”。或者如果我在“3”并按“下一步”，我会转到“1”。

我为“Prev”和“Next”编写了点击功能，如下所示：

//Write the onClick() event handler for "Prev"
    $('#prev').click(function(){

        ind = ($('.image').index('.image:visible')+1);

        if (ind == 1){
            hideAll(totalImages);
        }
        else{
            hideAll(ind-1);
        }
    });

    //Write the onClick() event hadler for "Next"
    $('#next').click(function(){
        ind = ($('.image').index('.image:visible')+1;

        if (ind == totalImages){
            hideAll(1);
        }
        else{
            hideAll(ind+1);
        }
    });

请注意hideAll(index)是一个隐藏除“index”指定的图像之外的所有图像的函数。

以下方式无效：

从1开始，如果我按“上一页”，我就会以3结束。但是当我再次按“上一个”时，所有图像都会变成空白。 “ind”的值为ZERO。

从1开始，如果我按“下一步”，我就会以2结束。但是从2开始，如果我按“下一步”，我最终会再次结束，而不是3。

Answer 1

您必须检查哪个图像是索引中的第一个/最后一个。这不是解决问题的完整解决方案，但您应该知道如何解决它。

查看previous()和next()功能。

// Cache jQuery results
var element = $(this);
var items = element.find(options.slideitem);

// How many items to slide?
var total = items.length;
var count = 0;

// Hide all items but not first item
items.not(':first').hide();

// Calculate next item
function next() {      
    (count == total - 1) ? count = 0 : count++;
    transition(items, count);
    return false
};

// Calculate previous item
function previous() {
    (count == 0) ? count = total - 1 : count--;
    transition(items, count);
    return false
};

// Do transition between two slides
function transition(items, count) {
    if (options.effect == 'show') {
        items.hide().eq(count).show();
    };
    if (options.effect == 'fadeIn') {
        items.css('position', 'absolute');
        items.fadeOut(options.fadespeed).eq(count).fadeIn(options.fadespeed);
    };
};

试图在JQuery中为图像导航器做一个环绕

1 个答案: