html 淡出淡入轮播图,用CSS3 transition属性实现淡入淡出轮播图

最近想本身写下轮播图，在网上发现一个网友用CSS transition属性实现的轮播，赶脚超简单哦，本身学习了后整理以下。(找不到原网址了-.-...就不贴了...)

(若是不了解transition，先去这里(点我，点我)学习下)css

思路

图片淡入淡出效果是不透明度(CSS opacity属性)的变换过程。举例，让图片淡出，就是图片的opacity属性在一段时间内逐渐从1变为0，淡入呢，则是图片的opacity属性在一段时间内逐渐从0变为1，用transition能够轻松实现啊。web

咱们设置图片的CSS样式以下，先不考虑布局和宽高这些。浏览器

img{

opacity: 0;

transition: opacity 1s;

}

img.active{

opacity: 1;

}

这段CSS能实现什么呢？ide

一开始，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类(淡入)，这样就实现了图片的切换。this

剩下的就是每隔固定时间间隔，执行切换图片函数就好了。spa

先上两个效果图。

点我跳转CodePen看本文代码最终效果，打开可能有点慢，耐心等等。这个是图片自动轮播，也能够经过图片底部的页码选择图片。

点我跳转看稍微变更后的另外一种效果(这是仿的京东首页轮播图效果，鼠标滑到图片上时会显示左右按钮框，点击左右按钮框也可实现图片切换。)

只有图片的轮播

HTML比较简单，就是一个

里面扔三个(假设是三张轮播图哈)。第一张图片已经加上了active类，这样网页加载的时候就会有图片，经过JS来添加active类初始化比较慢，要等JS加载。

CSS以下。设置好

和的尺寸，让重叠在一块儿，而且opacity为0。而具备active类的的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.οnmοuseοver=function () {

clearInterval(slideon); //当鼠标移入时清除轮播事件

}

slideshow.οnmοuseοut=function () {

slideon=setInterval(changeSlide,2000); //当鼠标移出时从新开始轮播事件

}

加上页码

恩，而后咱们加上和每张图片相对应的页码，并实现鼠标移上去就会显示相应图片这个功能。

在HTML的

中要添加以下。

1

2

3

第一个我也是已经添加了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()函数都要更新下，由于淡入淡出时的类名也要进行变动。

function slideOff() {

imgs[current].className=""; //图片淡出

pages[current].className="";

}

function slideOn() {

imgs[current].className="active"; //图片淡入

pages[current].className="active";

}

再就是鼠标移入时，须要显示对应的图片对吧。咱们先把当前图片淡出，而后获得当前对应的current，再让图片淡入就好啦。

for(var i=0; i

pages[i].οnmοuseοver=function(){

slideOff(); //图片淡出

current=this.innerHTML-1; //获得鼠标停留的页码对应的current

slideOn(); //图片淡出

}

}

加上图片描述

描述文字我设成了横着进入横着出去效果。怎么实现的呢？有点像滑动式的轮播图其实。

文本我设成position: absolute;，而后是否是能够经过更改left值来进行横向移位呢，再结合transition造成动画效果就好啦。

HTML须要增长以下。

这是第一幅图片哈哈哈

这是第二幅图片咩

到第三幅了！

对文本设置样式。注意看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";

}

还能够完善的几点

一是，轮播图通常是能够点的连接，因此应该是嵌套在里面的，这里我偷懒了。二是，当鼠标移到的文字上时，光标变成了工字型(cursor: text;)，由于光标是默认设置，在文本上时就变了，咱们能够在的CSS中设置cursor: Default;，这样就一直是普通的鼠标样式了。三是，的文字若是双击是能够选中的，比较丑，咱们加上下面的代码让文本不能被选取就行了。

/*设置不能选择文本*/

-ms-user-select:none;/*IE10*/

-webkit-user-select:none;/*webkit浏览器*/

user-select:none;

完。