Javascript implements slideshow effect source code for image switching

Home

Web Front-end

JS Tutorial

Javascript implements slideshow effect source code for image switching_image special effects

May 16, 2016 pm 05:46 PM

Picture switching slideshow

There are many slideshow effects for image switching on the webpage. Most of them are implemented with flash. So can javascript implement them? Of course, I wrote one myself and share it with everyone

Stop talking nonsense. , look at the code

Copy the code The code is as follows:

 
sx.activex.imagefade= { 
init:function(imga,fadeint,fadeoutt){ 
var ti=new Array(); 
for(var i=0;i<imga.length;i ){ 
ti[ i]=new Image(); 
ti[i].src=imga[i] 
} 
var div=document.createElement("div"); 
var img=document.createElement ("img"); 
img.src=ti[0].src; 
var span=document.createElement("span") 
span.style.backgroundColor="yellow"; 
 var a=[]; 
for(var i=0;i<imga.length;i ){ 
a[i]=document.createElement("a") 
a[i].style .backgroundColor="red"; 
a[i].style.width="10px"; 
a[i].style.margin="2px"; 
a[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 (t1<=100){ 
img.style.filter="alpha(opacity=" t1 ");"; 
t1=t1 2;} 
else{ 
window.clearInterval(h1 ); 
} 
},fadeint); 
} 
},fadeoutt); 
} 
}(i); 
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.height="100%"; 
img.style.width="100%"; 
span. style.position="absolute"; 
span.style.right="10px"; 
span.style.bottom="10px"; 
div.appendChild(span); 
return div; 
} 
} 

The called html

Copy code The code is as follows:

 
<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> 
 <script src="kongjian.js"></script> 
<script> 
var a=sx.activex.imagefade.init(["1.jpg","1 (1) .jpg"],10,10); 
a.style.height="400px"; 
a.style.width="400px"; 
//a.all[1].style. backgroundColor="green"; 
document.body.appendChild(a); 
</script> 
</body> 
</html> 

The first parameter of the above js function is an array consisting of the address of the image you want, the second parameter is the timer for the image to fade out, and the third parameter is the timer for the fade in.

This js The key is the code a[i].onclick. Note that two setintertvals are applied here, and closures are used. Be careful when assigning values.
If you have any questions, please communicate with me.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn