Javascript는 이미지 전환_이미지 특수 효과를 위한 슬라이드쇼 효과 소스 코드를 구현합니다.

웹페이지에는 이미지 전환을 위한 슬라이드쇼 효과가 많이 있는데, 대부분이 플래시로 구현되어 있는데, 자바스크립트로 구현해도 되나요? 물론 제가 직접 작성해서 모두와 공유합니다

헛소리는 그만하세요. . 코드를 보세요

코드를 복사하세요 코드는 다음과 같습니다.

sx.activex.imagefade= {
init:function(imga,fadeint,fadeoutt){
var ti=new Array()
for(var i=0;iti[ i]=new Image();
ti[i].src=imga[i]
}
var div=document.createElement("div"); >var img=document.createElement("img");
img.src=ti[0].src;
varspan=document.createElement("span")
span.style.BackgroundColor= "노란색";
var a=[];
for(var i=0;ia[i]=document.createElement("a")
a[i].style . backgroundColor="red";
a[i].style.width="10px"
a[i].style.margin="2px"; [i].href=" javascript:void(0)";
a[i].onclick=function(r){
return function(){
var t=100>var t1=0;
var h=window.setInterval(function(){
if(t>=0){
img.style.filter="alpha(opacity=" t ");";
t=t- 2;}
else{
window.clearInterval(h)
img.src=ti[r].src;
var h1=window.setInterval(function (){
if (t1img.style.filter="alpha(opacity=" t1 ");"
t1=t1 2;}
else{
window.clearInterval(h1);
}
},fadeint)
}
},fadeoutt)
}
a[ i].innerText=i 1 ;
span.appendChild(a[i]);
}
div.style.position="absolute"
div.style.height="200px" ;
div.style .width="200px";
div.appendChild(img)
img.style. style="max-width:90%"
img.style.width="100% ";
span.style.position="absolute";
span.style.right="10px";
span.style.bottom="10px";
div.appendChild(span) ;
return div;
}
}


호출된 html

코드 복사

코드는 다음과 같습니다.

<script></script>
<script> <BR>var a=sx.activex.imagefade.init([" 1.jpg","1 (1) .jpg"],10,10); <BR>a.style.height="400px"; <BR>a.style.width="400px"; <BR>/ /a.all[1].styleColor="green"; <BR>document.body.appendChild(a) <BR></script>
html>


위 js 함수의 첫 번째 매개변수는 원하는 이미지의 주소로 구성된 배열이고, 두 번째 매개변수는 이미지가 페이드 아웃되는 타이머, 세 번째 매개변수는 페이드 인을 위한 타이머입니다.

이 js는 a[i].onclick 코드입니다. 여기에는 두 개의 setintertval이 적용되며 값을 할당할 때 주의하세요. 질문이 있으시면 저에게 연락하십시오.