php页面淡出,利用html5实现图片的淡入淡出效果

目的：

实现图片的淡入淡出效果

(学习视频分享：html5视频教程)

具体代码如下：

移动端

*{

padding: 0;

margin: 0;

}

#slideshow{

width: 160px;

height: 600px;

margin: 0 auto; /*设置在页面水平居中*/

overflow: hidden;

position: relative;

}

#slideshow img{

width: 160px;

position: absolute; /*图片采取绝对定位，均位于左上角，重叠在一起*/

top: 0;

left: 0;

opacity: 0; /*初始不透明度为0，图片都看不见*/

transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/

}

#slideshow img.active{

opacity: 1; /*有active类的图片不透明度为1，即显示图片*/

}

//---------主角：轮播图函数-------------

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>=imgs.length) current=0;

slideOn();

}

//每2s调用changeSlide函数进行图片轮播

var slideon=setInterval(changeSlide,2000);

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

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

}

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

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

}

}

slideshow();