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

目的：

实现图片的淡入淡出效果

（学习视频分享：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教程

以上就是利用html5实现图片的淡入淡出效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！