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

이 문서의 예에서는 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[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

> >

본문>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.