近来想本身写下轮播图，在网上发明一个网友用CSS transition属性完成的轮播，赶脚超简朴哦，本身进修了后整顿以下。（找不到原网址了-.-…就不贴了…）
（假如不相识transition，先去这里（点我，点我）进修下）

思绪

图片淡入淡出结果是不透明度（CSS opacity属性）的变动历程。举例，让图片淡出，就是图片的opacity属性在一段时刻内逐步从1变成0，淡入呢，则是图片的opacity属性在一段时刻内逐步从0变成1，用transition能够轻松完成啊。

我们设置图片的CSS款式以下，先不斟酌规划和宽高这些。

img{
  opacity: 0;
  transition: opacity 1s;
}
img.active{
  opacity: 1;
}

这段CSS能完成什么呢？

一最先，img的opacity为0，所以我们看不见。假如我们用JS给img加上active类，img的opacity就要变成1对吧，由于有transition属性，所以要等1s，opacity才完整变成1，完成了淡入。

那淡出呢？你想下，等img淡入完了以后，我又用JS删掉img的active类会怎样？这时刻img的opacity应当从1变成0对吧，又由于有transition属性，所以opacity要等1s才变成0，这就完成了淡出。

JS的setInterval(code,millisec)（点我进修该函数）能够每隔一段时刻就实行指定代码。假如我每隔1s就变动下img的类名，假如有active类就删掉，假如没有就加上，如许图片就不断地淡入 → 淡出 → 淡入 → 淡出。

怎样完成多张图片轮番淡入淡出呢？

你每次删掉当前图片的active类（淡出），然后给下一张图片加上active类（淡入），如许就完成了图片的切换。

剩下的就是每隔牢固时刻距离，实行切换图片函数就好了。

先上两个结果图。

点我跳转CodePen看本文代码终究结果，翻开能够有点慢，耐烦等等。这个是图片自动轮播，也能够经由过程图片底部的页码挑选图片。

点我跳转看轻微变动后的另一种结果（这是仿的京东首页轮播图结果，鼠标滑到图片上时会显现摆布按钮框，点击摆布按钮框也可完成图片切换。）

只要图片的轮播

HTML比较简朴，就是一个<div>内里扔三个<img>（假设是三张轮播图哈）。第一张图片已加上了active类，如许网页加载的时刻就会有图片，经由过程JS来增添active类初始化比较慢，要等JS加载。

<div id="slideshow">
  <!-- 插进去轮播的图片们 -->
  <img class="active" src="http://img.kumi.cn/photo/01/69/30/016930f03d2e34cc.jpg" />
  <img src="http://image2.sina.com.cn/dongman/pic/chshidzrcji/U1595P55T4D115697F50DT20070406083109.jpeg" />
  <img src="http://t1.mmonly.cc/uploads/tu/201602/198/qh1spjs3guk.jpg" />
</div>

CSS以下。设置好<div id="slideshow">和<img>的尺寸，让<img>堆叠在一起，而且opacity为0。而具有active类的<img>的opacity为1。固然，别忘了设置transition: opacity 1s linear;。

*{
  padding: 0;
  margin: 0;
}
#slideshow{
  width: 800px;  
  height: 350px;
  margin: 0 auto; /*设置在页面程度居中*/
  overflow: hidden;
  position: relative;  
}
#slideshow img{
  width: 800px;
  position: absolute; /*图片采用相对定位，均位于左上角，堆叠在一起*/
  top: 0;
  left: 0;
  opacity: 0; /*初始不透明度为0，图片都看不见*/
  transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/
}
#slideshow img.active{
  opacity: 1; /*有active类的图片不透明度为1，即显现图片*/
}

JS以下。在轮播函数slideshow()里，定义了图片淡出函数slideOff()，图片淡入函数slideOn()和切换图片函数changeSlide()。

//---------主角：轮播图函数-------------
function slideshow() {
  var slideshow=document.getElementById("slideshow"),
  imgs=slideshow.getElementsByTagName("img"), //获得图片们
  current=0; //current为当前活泼的图片编号

  function slideOff() {
    imgs[current].className=""; //图片淡出
  }
  function slideOn() {
    imgs[current].className="active"; //图片淡入
  }

  function changeSlide() { //切换图片的函数
    slideOff(); //图片淡出
    current++; //自增1
    if(current>=3) current=0;
    slideOn(); //图片淡入
  }
  
  //每2s挪用changeSlide函数举行图片轮播
  var slideon=setInterval(changeSlide,2000);  
}

slideshow();

这里有个题目哦，轮播图平常鼠标移入图片后，轮播就住手了，当鼠标移出后，轮播又最先对吧。我们用JS的onmouseover和onmouseout来完成。

在JS的slideshow()函数中到场以下代码即可。

slideshow.onmouseover=function () {
  clearInterval(slideon); //当鼠标移入时消灭轮播事宜
}
slideshow.onmouseout=function () {
  slideon=setInterval(changeSlide,2000); //当鼠标移出时重新最先轮播事宜
}

详细结果见CodePen链接。

加上页码

恩，然后我们加上和每张图片相对应的页码，并完成鼠标移上去就会显现响应图片这个功用。

在HTML的<div id="slideshow">中要增添以下。

<!-- 插进去轮播的页码们 -->
<div>
  <span class="active">1</span>
  <span>2</span>
  <span>3</span>
</div>

第一个<span>我也是已增添了active类。

然后设置页码的款式，让它们位于图片的底部，一字排开。

/* 设置页码的款式 */
#slideshow div{
  width: 100%;
  position: absolute;
  bottom: 10px;
  text-align: center;
}
#slideshow span{
  display: inline-block;
  width: 25px;
  line-height: 25px;  /*当只要一行文本时height即是line-height*/
  border-radius: 25px;  /*设置页码为圆形*/
  margin: 0 15px;  
  background: white;
  font-size: 16px;
}
#slideshow span.active{
  color: white;
  background: #FFDD55;
}

在JS中，slideOff()和slideOn()函数都要更新下，由于淡入淡出时<span>的类名也要举行变动。

function slideOff() {
  imgs[current].className=""; //图片淡出
  pages[current].className="";
}
function slideOn() {
  imgs[current].className="active"; //图片淡入
  pages[current].className="active";
}

再就是鼠标移入<span>时，须要显现对应的图片对吧。我们先把当前图片淡出，然后获得当前<span>对应的current，再让图片淡入就好啦。

for(var i=0; i<pages.length; i++) { //定义鼠标移入和移出页码事宜
  pages[i].onmouseover=function(){
    slideOff(); //图片淡出
    current=this.innerHTML-1; //获得鼠标停止的页码对应的current
    slideOn(); //图片淡出
  }
}

详细结果见CodePen链接。

加上图片形貌

形貌笔墨我设成了横着进入横着出去结果。怎样完成的呢？有点像滑动式的轮播图实在。

文本我设成position: absolute;，然后是否是能够经由过程变动left值来举行横向移位呢，再连系transition构成动画结果就好啦。

HTML须要增添以下。

<!-- 插进去图片的形貌们 -->
<p class="active">这是第一幅图片哈哈哈</p>
<p>这是第二幅图片咩</p>
<p>到第三幅了！</p>

对文本设置款式。注重看left和transition。left为负值是什么意义呢？left为0就是紧挨着#slideshow左边对吧，为负的话就是继承往左移超出左边啦。

/*-- 设置图片形貌文本的款式 --*/
#slideshow p{
  position: absolute;
  top: 30px;
  left: -400px; /*相对于轮播图左边左移400px*/
  line-height: 30px;
  padding: 5px 30px;
  font-size: 20px;
  color: white;
  background-color: rgba(100,100,100,0.6); /*用rgba设置一个带透明度的背景色彩*/
  opacity: 0;
  transition: all 0.5s;
}
#slideshow p.active{
  left: 0;
  opacity: 1;
}

JS很简朴，更新下slideOff()和slideOn()函数。

function slideOff() {
  imgs[current].className=""; //图片淡出
  pages[current].className="";
  descrips[current].className="";
}
function slideOn() {
  imgs[current].className="active"; //图片淡入
  pages[current].className="active";
  descrips[current].className="active";
}

详细结果见CodePen链接。

还能够完美的几点

一是，轮播图平常是能够点的链接，所以<img>应当是嵌套在<a>内里的，这里我偷懒了。二是，当鼠标移到<span>的笔墨上时，光标变成了工字型（cursor: text;），由于光标是默认设置，在文本上时就变了，我们能够在<span>的CSS中设置cursor: Default;，如许就一直是一般的鼠标款式了。三是，<span>的笔墨假如双击是能够选中的，比较丑，我们加上下面的代码让文本不能被拔取就好了。

/*设置不能挑选文本*/
-ms-user-select:none;/*IE10*/
-webkit-user-select:none;/*webkit浏览器*/
user-select:none;

完。