Question

很抱歉，如果我的问题不清楚，我很难设法说出来。

我有一系列100％宽度的类似画廊的图像，顶部有一些侧箭头可以浏览它们。我很难想到一种方法可以让我改变箭头滚动到的位置，具体取决于屏幕上当前的图像。

我基本上需要这样的东西：

如果（element2）当前占据视口的100％，则（leftarrow）转到（element1）并且（rightarrow）转到（element3）

我试图制定这会带来什么，例如：

检查（element2）是否占据了视口的100％ - 不确定是否可以这样做
如果（element2）占用视口的100％== true，则将（leftarrow）的href更改为（element1） - 我假设您可以使用某种innerHTML事件来执行此操作
if（element2）占用视口的100％== true，将（rightarrow）的href更改为（element3）

我有点不知所措。有人能指出我正确的方向吗？或者让我知道这种方法是否有效？任何帮助，将不胜感激！： - ）

编辑：使用一些代码更新

以下是我目前如何使用侧箭头（类似）功能：

$('.sidearrowleft').click(function () {
    $.scrollTo('#img1', 800);
});

$('.sidearrowright').click(function () {
    $.scrollTo('#img2', 800);
});

我正在使用Ariel Flesler的scrollTO插件转到包含图片的div。

所以现在它只对两个图像正常运行，但是我需要一些方法来设置箭头的值，这取决于窗口当前所处的图像，所以我可以使它不仅仅是两个图像，如果这是清楚。

Answer 1

在变量中跟踪当前显示的图像将为您节省很多精力。

类似于：var currentImage = 1;。然后当您单击下一个箭头时，滚动到图像2并增加currentImage的值，并对前一个箭头执行相反的操作（您决定第一个箭头左侧的图像是否为在集合中的最后一个，或者当你在第一个图像上时，你只是禁用前一个箭头（当然，当你在最后一个图像上时是下一个箭头）。）

实际上没有必要用自己的所有计算代码来折磨自己（和浏览器），以便在变量中轻松获得这些代码。

更新

所以我会这样做：

var currentImage = 1; // default value, the first image is shown

$('.sidearrowleft').click(function () {
    if (currentImage == 1)
        return; // prevent the scroll when you're on the first image
    currentImage--; // decrement the value
    $.scrollTo('#img' + currentImage, 800);
});

$('.sidearrowright').click(function () {
    if (currentImage == totalImages) // totalImages is a variable containing the total number of images
        return; // prevent the scroll when you're on the last image
    currentImage++; // increment the value
    $.scrollTo('#img' + currentImage, 800);
});

如何根据页面上的当前位置更改滚动到的位置？

1 个答案: