CSS3+JavaScript实现翻页幻灯片效果

下面是详细讲解“CSS3+JavaScript实现翻页幻灯片效果”的完整攻略。

简介

翻页幻灯片是一种常见的网页轮播图效果，可以用于网站的首页展示、图片展览等场景。这种效果通过CSS3的transition属性+JavaScript的事件绑定来实现。

前置条件

在实现这种效果之前，需要掌握以下知识：
- HTML5和CSS3基础知识
- JavaScript基础知识
- 熟练掌握CSS3的transition属性

实现步骤

1. 编写HTML结构

<div class="slide">
  <ul class="slide-list">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
</div>

其中，.slide为最外层的容器；.slide-list为幻灯片列表；li为幻灯片项，每个幻灯片项里面可以放置图片、文字等内容。

1. 编写CSS样式

.slide {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slide-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 300%;
  height: 100%;
  font-size: 0;
  transition: left 0.5s ease-out;
}

.slide-list li {
  position: relative;
  width: 33.333%;
  height: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

其中，.slide的position属性为相对定位，为了让子元素的绝对定位可以以此为基准，.slide-list的width属性为300%，是因为子元素一共有3张图片，每张图片宽度为33.333%，这样可以让3张图片并排显示。li元素的display属性为inline-block，是为了让列表项可以横向排列。

1. 编写JavaScript代码

var curIndex = 0; // 当前索引
var slide = document.querySelector('.slide'); // 幻灯片容器
var slideList = document.querySelector('.slide-list'); // 幻灯片列表
var slideItems = slideList.querySelectorAll('li'); // 幻灯片项
var slideCount = slideItems.length; // 幻灯片数量
var nextBtn = document.querySelector('#next'); // 下一页按钮
var prevBtn = document.querySelector('#prev'); // 上一页按钮

// 上一页
prevBtn.addEventListener('click', function() {
  curIndex--;
  if (curIndex < 0) {
    curIndex = slideCount - 1;
  }
  slideList.style.left = '-' + curIndex * 100 / slideCount + '%';
});

// 下一页
nextBtn.addEventListener('click', function() {
  curIndex++;
  if (curIndex >= slideCount) {
    curIndex = 0;
  }
  slideList.style.left = '-' + curIndex * 100 / slideCount + '%';
});

其中，curIndex为当前幻灯片的索引，slide为最外层的容器，slideList为幻灯片列表，slideItems为幻灯片项，slideCount为幻灯片数量。nextBtn和prevBtn分别为下一页和上一页按钮。通过addEventListener绑定上一页和下一页的事件，在点击按钮时改变curIndex的值，然后通过修改slideList的left属性实现幻灯片滑动的效果。

示例说明

示例1：添加自动轮播效果

如果想要在用户不点击按钮的情况下自动轮播图片，可以通过setInterval方法实现。在上面的JavaScript代码基础上，添加以下部分即可实现自动轮播效果：

var intervalId = setInterval(function() {
  nextBtn.click();
}, 3000); // 每隔3秒自动轮播

// 鼠标悬停轮播停止，移开又开始轮播
slide.addEventListener('mouseover', function() {
  clearInterval(intervalId);
});

slide.addEventListener('mouseout', function() {
  intervalId = setInterval(function() {
    nextBtn.click();
  }, 3000);
});

其中，setInterval方法会每隔3秒触发nextBtn.click()事件，然后调用上面已经编写好的下一页的事件函数。当鼠标悬停在幻灯片上时会清除定时器，移开鼠标又会重新开启定时器。

示例2：添加缩略图导航条

在幻灯片下面添加缩略图导航条，可以让用户更清楚地了解图片的数量以及当前正在浏览的图片。实现方法如下：

<div class="slide-thumbnail">
  <ul class="thumbnail-list">
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div>

其中，.slide-thumbnail为缩略图容器，.thumbnail-list为缩略图列表，.active类为当前显示的缩略图的样式，可以通过JavaScript来动态修改。

然后在JavaScript代码中添加以下部分：

var thumbnailList = document.querySelector('.thumbnail-list'); // 缩略图列表
var thumbnailItems = thumbnailList.querySelectorAll('li'); // 缩略图项

// 更新缩略图
function updateThumbnail() {
  for (var i = 0; i < thumbnailItems.length; i++) {
    thumbnailItems[i].classList.remove('active');
  }
  thumbnailItems[curIndex].classList.add('active');
}

updateThumbnail(); // 初始化缩略图

// 缩略图点击事件
for (var i = 0; i < thumbnailItems.length; i++) {
  thumbnailItems[i].index = i;
  thumbnailItems[i].addEventListener('click', function() {
    curIndex = this.index;
    slideList.style.left = '-' + curIndex * 100 / slideCount + '%';
    updateThumbnail();
  });
}

其中，updateThumbnail函数在每次切换幻灯片时触发，用来更新缩略图的显示。在代码中通过classList属性来实现active类的添加和删除，从而实现缩略图样式的变化。缩略图的点击事件绑定在每个缩略图项上，当用户点击缩略图时会通过修改curIndex的值以及slideList的left属性来实现幻灯片的切换。同时，也会调用updateThumbnail函数来更新缩略图的状态。