jQuery实现两张图片渐入渐出无缝切

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 11:03:31

　　jQuery实现两张图片渐入渐出无缝切

jQuery 实现两张图片渐入渐出无缝切换

理解需求

我们要实现的效果是：两张图片在同一个容器内，通过淡入淡出的方式进行无缝切换。即当一张图片淡出时，另一张图片同时淡入，整个过程流畅自然。

实现步骤

1. HTML 结构

HTML


<div class="slider">

  <img src="image1.jpg" alt="图片1">

  <img src="image2.jpg" alt="图片2">

</div>

2. CSS 样式

CSS


.slider {

  position: relative;

  overflow: hidden;

}



.slider img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 1s ease-in-o   ut;

}

3. jQuery 代码

JavaScript


$(document).ready(function() {

  var $images = $('.slider img');

  var currentIndex = 0;



  function showImage(index) {

    $images.eq(index).fadeIn(1000).siblings().fadeOut(1000);

    currentIndex = index;

  }



  // 自动播放

  setInterval(function() {

    currentIndex++;

    if (currentIndex >= $images.length) {

      currentIndex = 0;

    }

    showImage(currentIndex);

  }, 3000);

});

代码解释

HTML 结构: 创建一个容器 slider，包含两张图片。
CSS 样式:
- 设置 position: absolute 和 top: 0; left: 0; 使图片层叠。
- 初始 opacity: 0，隐藏所有图片。
- 使用 transition 设置淡入淡出效果。
jQuery 代码:
- 获取所有图片元素。
- 定义一个函数 showImage，传入索引，使对应图片淡入，其他图片淡出。
- 使用 setInterval 实现自动播放。

实现细节

无缝切换: 通过 fadeIn 和 fadeOut 方法，同时控制两张图片的透明度，实现无缝切换。
索引控制: 使用 currentIndex 记录当前显示的图片索引，并通过模运算实现循环播放。
自定义: 可以调整 fadeIn 和 fadeOut 的时间，以及 transition 的效果，来实现不同的过渡效果。

拓展

手动切换: 添加按钮或箭头，点击时触发图片切换。
指示器: 添加圆点或小方块作为指示器，显示当前显示的图片。
触摸事件: 为移动端添加触摸事件，实现滑动切换。
随机播放: 每次切换时随机选择下一张图片。
淡入淡出效果优化: 可以使用 CSS3 的 animation 属性实现更复杂的动画效果。

完整示例

HTML


<!DOCTYPE html>

<html>

<head>

  <title>图片轮播</title>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <style>

    /* CSS样式同上 */

  </style>

</head>

<body>

  <div class="slider">

    <img src="image1.jpg" alt="图片1">

    <img src="image2.jpg" alt="图片2">

  </div>

  <script>

    // JavaScript代码同上

  </script>

</body>

</html>