利用html5实现图片的淡入淡出效果

百变鹏仔 2个月前 (10-17) #H5教程

文章标签效果

目的：

实现图片的淡入淡出效果

（学习视频分享：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=&#39;apple-mobile-web-app-capable&#39; content=&#39;yes&#39; /><meta name="format-detection" content="telephone=no" /><meta http-equiv=&#39;Content-Type&#39; content=&#39;textml;charset=UTF-8&#39; /><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" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (2).jpg" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (3).jpg" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (4).jpg" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (5).jpg" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (6).jpg" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (7).jpg" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (8).jpg" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (9).jpg" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (10).jpg" / alt="利用html5实现图片的淡入淡出效果" >    <img  src="img/1 (11).jpg" / alt="利用html5实现图片的淡入淡出效果" ></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实现图片的淡入淡出效果

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集