jQuery 滑动及点击切换效果

以下是一个 jQuery 实现的滑动及点击切换效果的示例代码：

HTML 代码：

<div class="slider">
  <ul>
    <li class="active">Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
  </ul>
</div>

CSS 代码：

.slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.slider li {
  float: left;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slider li.active {
  opacity: 1;
}

.slider .dots {
  text-align: center;
  margin-top: 10px;
}

.slider .dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 5px;
  cursor: pointer;
}

.slider .dots span.active {
  background-color: #333;
}

jQuery 代码：

$(document).ready(function() {
  // 初始状态，第一个 slide 显示
  $('.slider li:first-child').addClass('active');

  // 点击 dots 切换 slide
  $('.dots span').click(function() {
    var index = $(this).index();

    $('.slider li.active').removeClass('active');
    $('.slider li').eq(index).addClass('active');

    $('.dots span.active').removeClass('active');
    $(this).addClass('active');
  });

  // 自动切换 slide
  setInterval(function() {
    var currentIndex = $('.slider li.active').index();
    var nextIndex = currentIndex + 1;

    if (nextIndex >= $('.slider li').length) {
      nextIndex = 0;
    }

    $('.slider li.active').removeClass('active');
    $('.slider li').eq(nextIndex).addClass('active');

    $('.dots span.active').removeClass('active');
    $('.dots span').eq(nextIndex).addClass('active');
  }, 3000);
});

通过上述代码，可以实现一个简单的滑动及点击切换效果。具体实现原理是使用 CSS 中的 `position: absolute` 属性将每个 slide 定位到容器的左上角，并使用 `opacity` 属性控制它们的显示和隐藏。点击 dots 时，通过 jQuery 的 `index()` 方法获取当前点击的 dots 的索引，然后将相应的 slide 显示出来。自动切换 slide 的实现则是利用了 `setInterval()` 函数定时执行一段代码。