-1

我正在尝试创建一个onkeydown事件，该事件将自动将特定站点上的图像库移动到下一个图像，或返回。问题是，链接结构没有有效地构建。

所以基本上，我试图在用户脚本中查找您要单击返回或前进的图像是否存在于页面上，带有 if 语句，以确定后退/前进操作（左箭头/右箭头键盘分别）实际上可以完成。

我将如何确定页面上是否存在所述图像？

4

3 回答 3

0

首先，确定图像的 CSS 路径或src属性。（src如果站点使用精灵，则可能不存在。或者，它可能不是唯一的。）

您可以右键单击图像并选择Inspect Element，然后使用开发工具或 Firebug 来帮助确定这一点。
链接到目标页面，或粘贴适当的 HTML 片段，如果您需要我们帮助选择选择器。

然后你可以使用这样的代码：

纯javascript：

  • var lftArrwImg  = document.querySelector ("#galleryControls div.foo a img");
if (lftArrwImg) {
    // DO YOUR LEFT ARROW STUFF HERE.
}

    或者：

    var lftArrwImg  = document.querySelector ("img[src='/some_path/left_arrow.gif']");
if (lftArrwImg) {
    // DO YOUR LEFT ARROW STUFF HERE.
}


jQuery：

  • if ( $("#galleryControls div.foo a img").length ) {
    // DO YOUR LEFT ARROW STUFF HERE.
}

    或者：

    if ( $("img[src='/some_path/left_arrow.gif']").length ) {
    // DO YOUR LEFT ARROW STUFF HERE.
}

请注意，某些网站可能始终存在图像，但在不适用时将其隐藏。

于 2012-09-24T10:20:20.280 回答
0

通常一个画廊的所有图像都保存在一个数组中，所以一个典型的行为是循环，所以当它在最后一个图像并且用户想要去下一个时，画廊去第一个，反之亦然，例如

var currentImage = 0;
var numberOfImages = imageArray.length;

if ( <user wants next image> ) {
  currentImage = ++currentImage % numberOfImages;

} else if ( <user wants previous image> ) {
  currentImage = (--currentImage + numberOfImages) % numberOfImages; 
}

我不知道你是如何实现画廊的，但你应该能够以某种方式应用上述逻辑。

提醒一下，如果您正在寻找具有特定src值的图像，请按照 MarcB 的建议遍历它们。请注意，不需要getElementsByTagName，有一个document.images集合可供使用。

另请注意，在某些浏览器中，src属性将是完整路径，但在其他（较旧的）浏览器中只是属性值。所以最好只匹配实际的图像名称。

于 2012-09-24T04:42:16.623 回答
0

假设您使用的是 jquery，那么简单如下：

$('img[src="/path/to/left-arrow-picture.jpg"]')

会做，或者如果他们有特定的课程，

$('img.prevclass')

会工作。如果您仅使用纯 JavaScript，则可以使用

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++) {
   if (i.src == '/path/to/left-arrow-picture.jpg') {
       ...
   }
}
于 2012-09-24T04:29:36.363 回答