jquery+css实现动感的图片切换效果

下面是详细讲解“jquery+css实现动感的图片切换效果”的完整攻略。

效果展示

这是一段使用jQuery和CSS实现的图片切换效果。

演示链接：https://codepen.io/jiekezaohua/pen/XWKbxKd

整体思路

1. 使用CSS定义一个固定大小和位置的容器div，并将其中的图片置于其中；
2. 使用jQuery监听图片列表中的mouseenter和mouseleave事件，实现鼠标悬停时切换图片；
3. 在图片上覆盖一个半透明的遮罩层，增加动感效果。

具体实现

1. HTML结构

<div class="container">
  <ul class="img-list">
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
    <li><img src="image4.jpg" alt=""></li>
  </ul>
  <div class="mask"></div>
</div>

2. CSS样式

.container {
  position: relative;
  width: 500px;
  height: 300px;
}

.img-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.img-list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
}

.img-list li:not(:first-child) {
  opacity: 0;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s ease;
}

3. jQuery代码

$(function() {
  var $images = $('.img-list').find('li');
  var intervalId = null;

  $images.mouseenter(function() {
    var index = $(this).index();
    clearInterval(intervalId);

    $images.not(':eq(' + index + ')').stop().animate({ opacity: 0 }, 500);
    $images.eq(index).stop().animate({ opacity: 1 }, 500);
    $('.mask').stop().animate({ opacity: 1 }, 500);
  });

  $images.mouseleave(function() {
    intervalId = setInterval(function() {
      var $current = $('.img-list').find('li:visible');
      var index = $current.index();
      var length = $images.length;

      $current.stop().animate({ opacity: 0 }, 500);
      $images.eq((index + 1) % length).stop().animate({ opacity: 1 }, 500);
      $('.mask').stop().animate({ opacity: 0 }, 500);
    }, 2000);
  });

  $images.eq(0).trigger('mouseenter');
});

示例说明

示例一

演示链接：https://codepen.io/jiekezaohua/pen/wvJKJwK

这个演示中，除了实现了基本效果外，还实现了如下功能：

1. 点击小圆点切换图片；
2. 添加了上一个、下一个按钮，并能通过点击按钮前进或后退。

示例二

演示链接：https://codepen.io/jiekezaohua/pen/eYzRmew

这个演示中，与上一个示例相比，还增加了如下功能：

1. 所有图片均能平滑地向右平移一定距离；
2. 将图片缩小并垂直居中，并添加了图片标题。

总结

以上就是使用jQuery和CSS实现图片切换效果的完整攻略。其中，CSS样式主要用于定义容器div、图片列表、图片和遮罩层的样式。jQuery代码则主要在鼠标进入/离开图片时控制图片及遮罩层的渐变效果。在实际开发中，还可根据需求继续扩展代码，增加更多的动态效果。