html5를 사용하여 이미지의 페이드인 및 페이드아웃 효과 얻기-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

html5를 사용하여 이미지의 페이드인 및 페이드아웃 효과 얻기

王林

Dec 15, 2020 am 09:57 AM

html5 그림

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=&#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" />
    <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를 사용하여 이미지의 페이드인 및 페이드아웃 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.