HTML5实现图片淡入淡出效果
2017-06-23 17:05
465 查看
HTML5实现图片淡入淡出效果
<!doctype html> <html lang="en"> <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 class="active" 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>
相关文章推荐
- JS实现图片淡入淡出效果
- HTML5与jQuery实现渐变绚丽网页图片效果
- 使用sdWebImage实现对tableView的cell加载图片淡入淡出效果
- 【实例】html5-canvas上实现图片的颠倒效果
- javascript和HTML5上传图片之前实现预览效果
- C#实现淡入淡出显示图像效果显示图片。
- Javascript与HTML5的canvas实现图片旋转效果
- 原生js和jquery实现图片轮播淡入淡出效果
- HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
- jQuery+HTML5实现图片上传前预览效果
- 使用HTML5技术实现的全屏图片模糊效果
- 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片变换的特效(同时淡入淡出效果)
- 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片淡入淡出效果
- jQuery实现首页图片淡入淡出效果的方法
- flash载入外部图片并实现淡入淡出/移动效果
- HTML5与jQuery实现渐变绚丽网页图片效果
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- html5实现鼠标停在图片上出现动画效果
- 两种修改png图片颜色方法的对比/游戏帧速度处理/J2me中实现淡入淡出效果
- jQuery实现首页图片淡入淡出效果的方法