이 기사에서는 페이드 포커스 사진 슬라이드 스위칭 효과를 달성하기위한 JS+CSS의 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> a js+css 페이드 인 포커스 사진 슬라이드 스위칭 효과 </title>
<스타일>
Body, Div, Ul, Li {마진 : 0; 패딩 : 0;}
ul {목록 스타일 유형 : 없음;}
Body {배경 :#000; 텍스트-정렬 : 중심; 글꼴 : 12px/20px Arial;}
#box {위치 : 상대; 너비 : 322px; 높이 : 172px; 배경 : #ffff; Border-Radius : 5px; 경계 : 8px solid #ffff; 마진 : 10px Auto;}
#box .list {위치 : 상대; 너비 : 320px; 높이 : 240px; 오버플로 : 숨겨진; 경계 : 1px solid #ccc;}
#box .list li {위치 : 절대; 상단 : 0; 왼쪽 : 0; 너비 : 320px; 높이 : 240px; 불투명도 : 0; 필터 : 알파 (불투명도 = 0);}
#box .list li.current {불투명도 : 1; 필터 : 알파 (불투명도 = 100);}
#box .count {위치 : 절대; 오른쪽 : 0; 하단 : 5px;}
#box .count li {color : #ffff; float : 왼쪽; 너비; 너비 : 20px; 높이 : 20px; 커서 : 포인터; 마진-오른쪽 : 5px; 오버플로 : 숨겨진; 배경 :#f90; 불투명도 : 0.7; 필터 : 알파 (불투명도 = 70); 국경-라디우스 : 20px;}.
#box .count li.current {color : #fff; 불투명도 : 1; 필터 : 알파 (불투명도 = 100); 글꼴 중량 : 700; 배경 :#f60;}
#tmp {너비 : 100px; 높이 : 100px; 배경 : 빨간색; 위치 : 절대;}
</스타일>
<script type = "text/javaScript">
Window.onload = function ()
{
var obox = document.getElementById ( "box");
var aul = document.getElementsByTagName ( "ul");
var aimg = aul [0] .getElementsByTagName ( "li");
var anum = aul [1] .getElementsByTagName ( "li");
var timer = play = null;
var i = index = 0;
// 토글 버튼
for (i = 0; i <anum.length; i ++)
{
anum [i]. index = i;
Anum [i] .onmouseover = function ()
{
show (this.index)
}
}
// 마우스가 스 와이프하고 타이머를 닫습니다
obox.onmouseover = function ()
{
Clearinterval (Play)
};
// 마우스가 떠나고 자동 재생을 시작합니다
obox.onmouseout = function ()
{
autoplay ()
};
// AUTOPLAY 기능
함수 autoplay ()
{
play = setInterval (function () {
색인 ++;
index> = aimg.length && (index = 0);
쇼 (색인);
}, 2000);
}
AutoPlay (); // 응용 프로그램 이미지 전환 페이드 효과
기능 쇼 (a)
{
색인 = a;
var alpha = 0;
for (i = 0; i <anum.length; i ++) anum [i] .classname = "";
anum [index] .classname = "current";
ClearInterval (타이머);
for (i = 0; i <aimg.length; i ++)
{
aimg [i] .style.opacity = 0;
aimg [i] .style.filter = "alpha (불투명도 = 0)";
}
타이머 = setInterval (function () {
알파 += 2;
알파> 100 && (alpha = 100);
AIMG [index] .style.opacity = alpha / 100;
AIMG [index] .style.filter = "alpha (incacity =" + alpha + ")";
alpha == 100 && clearinterval (타이머)
}, 20);
}
};
</스크립트>
</head>
<body>
<div id = "box">
<ul>
<li> <img src = "/images/m01.jpg"/> </li>
<li> <img src = "/images/m02.jpg"/> </li>
<li> <img src = "/images/m03.jpg"/> </li>
<li> <img src = "/images/m04.jpg"/> </li>
<li> <img src = "/images/m05.jpg"/> </li>
</ul>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.