> 웹 프론트엔드 > JS 튜토리얼 > 페이드인 초점 그림 슬라이드쇼 전환 효과를 구현하는 JS CSS 방법_javascript 기술

페이드인 초점 그림 슬라이드쇼 전환 효과를 구현하는 JS CSS 방법_javascript 기술

WBOY
풀어 주다: 2016-05-16 16:12:58
원래의
1044명이 탐색했습니다.

이 문서의 예에서는 JS CSS를 사용하여 페이드인 초점 이미지 슬라이드쇼 전환 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.




一款JS CSS淡入式焦点图文幻灯切换效果
<스타일>
body,div,ul,li{margin:0;padding:0;}
ul{목록 스타일 유형:없음;}
본문{배경:#000;text-align:center;font:12px/20px Arial;}
#box{위치:상대적;너비:322px;높이:172px;배경:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}
#box .list{위치:상대적;너비:320px;높이:240px;오버플로우:숨김;테두리:1px 솔리드 #ccc;}
#box .list li{position:absolute;top:0;left:0;width:320px;height:240px;opacity:0;filter:alpha(opacity=0);}
#box .list li.current{opacity:1;filter:alpha(opacity=100);}
#box .count{위치:절대;오른쪽:0;하단:5px;}
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden; background:#F90;opacity:0.7;filter:alpha( 불투명도=70);border-radius:20px;}
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700; background:#f60;}
#tmp{너비:100px;높이:100px;배경:빨간색;위치:절대;}

<스크립트 유형="텍스트/자바스크립트">
window.onload = 함수()
{
 var oBox = document.getElementById("box");
 var aUl = document.getElementsByTagName("ul");
 var aImg = aUl[0].getElementsByTagName("li");
 var aNum = aUl[1].getElementsByTagName("li");
 var 타이머 = 재생 = null;
 var i = 인덱스 = 0;
 //切换按钮
 for (i = 0; i  {
  aNum[i].index = i;
  aNum[i].onmouseover = 함수()
  {
   표시(this.index)
  }
 }
 //鼠标划过关闭定时器
 oBox.onmouseover = 함수()
 {
  클리어 인터벌(재생)
 };
 //鼠标离开启动自动播放
 oBox.onmouseout = 함수()
 {
  자동재생()
 };
 //自动播放函数
 자동 재생 기능()
 {
  play = setInterval(function () {
   색인 ;
   index >= aImg.length && (index = 0);
   표시(색인); 
  },2000);
 }
 autoPlay();//应用图文切换 淡入淡效果
 기능 쇼(a)
 {
  인덱스 = a;
  var 알파 = 0;
  for (i = 0; i   aNum[index].className = "현재";
  ClearInterval(타이머);  
  for (i = 0; i < aImg.length; i )
  {
   aImg[i].style.opacity = 0;
   aImg[i].style.filter = "알파(불투명도=0)";
  }
  타이머 = setInterval(함수 () {
   알파 = 2;
   알파 > 100 &&(알파 =100);
   aImg[index].style.opacity = 알파 / 100;
   aImg[index].style.filter = "alpha(opacity = " alpha ")";
   알파 == 100 && ClearInterval(타이머)
  },20);
 }
};




   

           

  •        

  •        

  •        

  •        

  •    
       

             
    • 1

    •        
    • 2

    •        
    • 3

    • > >


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿