HTML5中怎么实现图片淡入淡出的展示效果
导读：相信很多人对“HTML5中怎么实现图片淡入淡出的展示效果”都不太了解，下面小编为你详细解释一下这个问题，希望对你有一定的帮助 目的：实现图片的淡入淡出效果具体代码如下：<!doctype html> <...
相信很多人对“HTML5中怎么实现图片淡入淡出的展示效果”都不太了解，下面小编为你详细解释一下这个问题，希望对你有一定的帮助
目的：
实现图片的淡入淡出效果
具体代码如下：
!doctype html>
html>
head>
meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
meta name='apple-mobile-web-app-capable' content='yes' />
meta name="format-detection" content="telephone=no" />
meta http-equiv='Content-Type' content='textml;
charset=UTF-8' />
title>
移动端/title>
style>
*{
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，即显示图片*/
}
/style>
/head>
body>
div id="slideshow">
!-- 插入轮播的图片们 -->
img src="img/1 (1).jpg" />
img src="img/1 (2).jpg" />
img src="img/1 (3).jpg" />
img src="img/1 (4).jpg" />
img src="img/1 (5).jpg" />
img src="img/1 (6).jpg" />
img src="img/1 (7).jpg" />
img src="img/1 (8).jpg" />
img src="img/1 (9).jpg" />
img src="img/1 (10).jpg" />
img src="img/1 (11).jpg" />
/div>
script>
//---------主角：轮播图函数-------------
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.onmouseover=function () {
clearInterval(slideon);
//当鼠标移入时清除轮播事件
}
slideshow.onmouseout=function () {
slideon=setInterval(changeSlide,1500);
//当鼠标移出时重新开始轮播事件
}
}
slideshow();
/script>
/body>
/html>
通过以上内容的阐述，相信大家对“HTML5中怎么实现图片淡入淡出的展示效果”已经有了进一步的了解，更多相关的问题，欢迎关注网络或到官网咨询客服。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5中怎么实现图片淡入淡出的展示效果
本文地址： https://pptw.com/jishu/654664.html