本文介绍的实例幻灯片/轮播实例，具有淡入淡出的淡入淡出动轮过渡效果，除了能自动轮播外，幻灯画效还可以手动点击按钮向左向右滑动。片自此外，播动幻灯片上还可以自定义标题和内容。实例是淡入淡出动轮一款比较流行的幻灯片/轮播动画。

demodownload

1、幻灯画效本实例使用Bootstrap插件实现

需要引用如下两个文件：bootstrap.min.css、片自bootstrap.min.js，播动此外，实例还要引用jquery库文件。淡入淡出动轮

在前面引用CSS文件：

在后面引用JS文件：

2、幻灯画效自定义轮播速度

实例需要用到的片自JS编程：

  //$('#carouselFade').carousel(); /* 默认 */
  $('#carouselFade').carousel({
    interval: 3000 //改变轮播速度
  })

3、字体文件不能缺

本实例向左向右箭头图标使用的播动是字体图标，所以实例文件不能缺失如下几个文件，且文件夹位置和名称不能改，否则看不到向左向右箭头图标。

如果看不到箭头图标，你可能需要设置下WEB服务器环境，参考文章：Linux Nginx安装配置Font Awesome图标字体，IIS6.0安装配置FontAwesome图标字体运行环境，IIS7.5安装配置Font Awesome图标字体的方法。

4、自定义幻灯片/轮播图片

幻灯片/轮播图片在CSS样式里定义background: url();。

.item:nth-child(1) {
  background: url('1-1.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.item:nth-child(2) {
  background: url('1-2.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.item:nth-child(3) {
  background: url('1-3.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

5、在HTML里自定义标题和内容

幻灯片/轮播图片对应的HTML。

    
    
      
标题1

      
内容1