Javascript implements slideshow effect source code for image switching

Javascript implements slideshow effect source code for image switching_image special effects

WBOY

Release： 2016-05-16 17:46:34

Original

2210 people have browsed it

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;iti[ 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;ia[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:

Untitled Document

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.