如何实现图像内淡入淡出按钮的图像浏览

Question

我正在开发一个用于浏览图像的应用程序。我已经通过在图像外部使用标准文本锚点来实现浏览机制。

现在我想在图像“内部”实现浏览机制。让我们说清楚。 用户看到图像，并在 onMouseOver 事件发生时，根据指针指向图片的哪一侧，分别在右侧或左侧显示一个箭头。 在 onClick 事件发生后，在图片的右侧或左侧，用户应该能够浏览到上一张/下一张图像。无需单击箭头即可浏览。

现在我知道可以用Javascript实现这个功能，特别是jQuery框架有一些有趣的功能可以做到这一点。我遵循以下方法：

1. 为图像创建一个 div 容器，并将 标签放入其中。

2. 定义容器内导航箭头的位置。

3. 在 onMouseOver 事件时调用一个 jquery 函数，将箭头图像放置在步骤 2 中定义的位置。

4. 使用一些fading函数来实现淡入淡出效果。

5. 点击时调用已实现的图像浏览功能。

我的疑问主要是：

Q1）我的方法（上述几点）是否正确？

Q2) 如何根据图像大小调整浏览箭头的位置？

Q3) 如何让 jQuery“理解”用户是 onMouseOver 还是 onClicked 到图像的左侧或右侧？

虽然所有答案都受到赞赏，但我并不是要求纯代码在我的应用程序中复制粘贴和调整，但我想知道我的方法是否正确，并且有一些有用的 jQuery（或任何其他 JS 框架）函数来实现这个功能。

Answer 1

Q1：你的方法正朝着正确的方向发展。

Q2：使用 jQuery，您可以读出元素的宽度，也可以使用 position:absolute; 定位箭头元素； right:20px ...但检查 Q3->

Q3：在您的停留中定义两个单独的 div，一个位于图像的右半部分，另一个位于图像的左半部分。所以结构可以是：

<div class="image-wrapper">
   <img src="somthing.jpg"/>
   <div class="navigation-overlay">
      <div class="left-arrow></div>
      <div class="right-arrow"></div>
   </div>
</div>