이 기사에서는 플래시 슬라이드 사진의 전환 효과를 실현하기위한 JS 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml"lang = "zh-cn">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" />
<meta http-equiv = "content-language"content = "gb2312" />
<meta name = "author"content = "rainoxu" />
<title> js는 플래시 슬라이드 사진 스위칭 효과를 시뮬레이션합니다 </title>
</head>
<body>
<스타일 유형 = "텍스트/CSS">
/ * <! [cdata [ */
ul, li {
패딩 : 0;
여백 : 0;
목록 스타일 : 없음;
}
#flashbox {
너비 : 326px;
높이 : 246px;
국경 : 1px Solid #eee;
위치 : 상대;
}
#flashbox img {
/*초기에 표시하지 마십시오*/
디스플레이 : 없음;
/* 마진과 패딩이 때때로 문제를 일으킬 수 있으므로 빈 공간을 달성하기 위해 경계를 사용하여 빈 공간을 달성합니다.*/
테두리 : 3px 솔리드 #fff;
}
#flashbox ul {
위치 : 절대;
오른쪽 : 7px;
하단 : 9px;
글꼴 : 9px Tahoma;
}
#flashbox ul li {
디스플레이 : 블록;
플로트 : 왼쪽;
너비 : 12px;
높이 : 12px;
라인 높이 : 12px;
마진 오른쪽 : 3px;
국경 : 1px 고체 #999;
배경 :#f0f0f0;
텍스트 정렬 : 센터;
커서 : 포인터;
}
#flashbox ul li.hover {
국경 색 : 빨간색;
배경 :#ffe1e1;
색상 : 빨간색;
}
/ *]]> */
</스타일>
<script type = "text/javaScript">
함수 FlashBoxCtrl (O) {
this.obj = document.getElementById (o);
//이 개인 방법이 작성되었지만 당분간 유용하지 않습니다.
함수 addListener (ELE, EventName, FunctionBody) {
if (ele.attachevent) {
ele.attachevent ( "on"+eventName, functionbody);
} else if (ele.addeventListener) {
ele.addeventListener ( "on"+eventName, functionbody, false);
}또 다른{
거짓을 반환합니다.
}
}
// 초기화
this.init = function () {
var objimg = this.obj.getElementsByTagName ( "IMG");
var taglength = objimg.length;
if (taglength> 0) {
var oul = document.createElement ( "ul");
oul.setattribute ( "id", o+"numtag");
for (var i = 0; i <taglength; i ++) {
var oli = oul.appendChild (document.createElement ( "li"));
if (i == 0) {
oli.setattribute ( "클래스", "호버"); // 초기화 중에 강조 표시 할 첫 번째를 설정합니다
oli.setattribute ( "classname", "hover");
}
// 레이블 수를 설정합니다
oli.appendChild (document.createtextNode ((i+1)));
}
this.obj.appendchild (oul);
objimg [0] .style.display = "block";
// 태그 이벤트를 설정합니다
var otag = this.obj.getElementsByTagName ( "li");
for (var i = 0; i <otag.length; i ++) {
otag [i] .onmouseover = function () {
for (j = 0; j <otag.length; j ++) {
otag [j] .classname = "";
objimg [j] .style.display = "none";
}
this.classname = "호버";
objimg [this.innerhtml-1] .style.display = "block";
}
}
}
};
// 자동 스크롤 메소드는 아직 작성되지 않았습니다
this.imgroll = function () {};
// 객체를 초기화하기 위해 개체를 생성 할 때 init () 메소드가 자동으로로드됩니다.
this.init ();
}
</스크립트>
<div id = "Flashbox">
<img src = "/images/m02.jpg"/>
<img src = "/images/m03.jpg"/>
<img src = "/images/m04.jpg"/>
<img src = "/images/m09.jpg"/>
</div>
<script type = "text/javaScript">
// 객체를 생성합니다
새로운 FlashBoxCtrl ( "FlashBox");
</스크립트>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.