jq实现左侧显示图片右侧文字滑动切换效果

用 jQuery 实现左侧显示图片右侧文字滑动切换效果

在前端网页设计中，经常需要实现图片和文本的切换展示效果。本篇文章将介绍使用 jQuery 实现左侧显示图片右侧文字滑动切换效果的方法，并提供详细的示例代码。

实现效果

我们要实现的效果是当用户点击页面上的某个按钮时，页面显示出一张图片和一段对应的文字内容，当用户再次点击按钮时，页面上的图片和文字内容将以滑动的形式切换到下一个对应的选项。具体展示效果如下图：

HTML 结构

为了实现这种滑动切换效果，我们需要按照以下结构编写 HTML 代码：

---- ------------------
  ---- --------------------
    ---- ----------------- ---------- ---
  ------
  ---- ---------------------
    --------------
    ------- ------- ---- ---------
  ------
------

---- ---------------------
  ------- ---------- -------------- ----------
  ------- ------------------ ----------
  ------- ------------------ ----------
  ------- ------------------ ----------
------

其中，.container 是一个包含图片和文本内容的容器，.img-wrapper 和 .text-wrapper 分别是用来包裹图片和文本内容的子容器。.button-group 是一个包含切换按钮的容器，每个按钮都有 .btn 类名，并且第一个按钮有 .active 类名。

CSS 样式

为了实现滑动切换效果，我们需要将 .img-wrapper 和 .text-wrapper 的 position 属性设置为 absolute，并将它们的 left 属性分别设置为 0 和 100%。同时，我们还需要设置 .container 的 position 属性为 relative，以便让 .img-wrapper 和 .text-wrapper 相对于 .container 定位。

---------- -
  --------- ---------
-

-------------
------------- -
  --------- ---------
  ---- --
  ------- --
-

------------ -
  ----- --
-

------------- -
  ----- -----
-

此外，我们还需要为 .btn 和 .active 类编写样式，以便让按钮在选中时显示不同的样式。

---- -
  ----------------- -----
  ------- -----
  -------- ---- -----
  ------------- -----
  ------- --------
-

------- -
  ----------------- -----
-

JavaScript 代码

接下来，我们需要使用 jQuery 来编写 JavaScript 代码实现滑动切换效果。具体实现过程如下：

首先，我们定义一个数组 options，用来存储每个选项对应的图片和文本内容。数组中每个元素都是一个包含 img 和 text 两个属性的对象。

--- ------- - -
  -
    ---- --------------
    ------ ------- ---
    ----- ----- ------- --- ------ ---
  --
  -
    ---- --------------
    ------ ------- ---
    ----- ----- ------- --- ------ ---
  --
  -
    ---- --------------
    ------ ------- ---
    ----- ----- ------- --- ------ ---
  --
  -
    ---- --------------
    ------ ------- ---
    ----- ----- ------- --- ------ ---
  -
--

然后，我们定义一个函数 showOption，用来显示指定选项对应的图片和文本内容。这个函数接受一个参数 index，表示要显示的选项的索引。在函数内部，我们使用 jQuery

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/3972