Slideshow sencillo en Javascript
Un slideshow es un tipo de presentación de imágenes que van a apareciendo una después de la otra, en este tutorial les voy a enseñar a crear uno muy sencillo utilizando Javascript, el terminado es muy bueno aunque se puede mejorar pero las bases son las que les voy a mostrar para que al final puedan configurarlo ustedes mismos
El archivo terminado lo puedes ver aquí, el archivo js que vas a necesitar para poder aplicar las transiciones se encuentra aquí.
CSS
<style type="text/css">
.flashclass{ /*sample CSS class added to image slideshow container*/
width: 200px; /*a width should be defined for transition to work*/
border: 5px solid orange;
padding: 5px;
}
.flashclass img{
border-width: 0;
}
</style>
Javascript
<script type="text/javascript" name="transitionshow.js">
/***********************************************
* Random Transitions Slideshow- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
//Random Transitions Slideshow- By JavaScript Kit (http://www.javascriptkit.com)
//Created: Nov 3rd, 2008
var global_transitions=[ //array of IE transition strings
"progid:DXImageTransform.A.Barn()",
"progid:DXImageTransform.Microsoft.Blinds()",
"progid:DXImageTransform.Microsoft.CheckerBoard()",
"progid:DXImageTransform.Microsoft.Fade()",
"progid:DXImageTransform.Microsoft.GradientWipe()",
"progid:DXImageTransform.Microsoft.Inset()",
"progid:DXImageTransform.Microsoft.Iris()",
"progid:DXImageTransform.Microsoft.Pixelate(maxSquare=15)",
"progid:DXImageTransform.Microsoft.RadialWipe()",
"progid:DXImageTransform.Microsoft.RandomBars()",
"progid:DXImageTransform.Microsoft.RandomDissolve()",
"progid:DXImageTransform.Microsoft.Slide()",
"progid:DXImageTransform.Microsoft.Spiral()",
"progid:DXImageTransform.Microsoft.Stretch()",
"progid:DXImageTransform.Microsoft.Strips()",
"progid:DXImageTransform.Microsoft.Wheel()",
"progid:DXImageTransform.Microsoft.Zigzag()"
]
function flashyslideshow(setting){
this.wrapperid=setting.wrapperid
this.imagearray=setting.imagearray
this.pause=setting.pause
this.transduration=setting.transduration/1000 //convert from miliseconds to seconds unit to pass into el.filters.play()
this.currentimg=0
var preloadimages=[] //temp array to preload images
for (var i=0; i<this.imagearray.length; i++){
preloadimages[i]=new Image()
preloadimages[i].src=this.imagearray[i][0]
}
document.write('<div id="'+this.wrapperid+'" class="'+setting.wrapperclass+'"><div id="'+this.wrapperid+'_inner" style="width:100%">'+this.getSlideHTML(this.currentimg)+'</div></div>')
var effectindex=Math.floor(Math.random()*global_transitions.length) //randomly pick a transition to utilize
var contentdiv=document.getElementById(this.wrapperid+"_inner")
if (contentdiv.filters){ //if the filters[] collection is defined on element (only in IE)
contentdiv.style.filter=global_transitions[effectindex] //define transition on element
this.pause+=setting.transduration //add transition time to pause
}
this.filtersupport=(contentdiv.filters && contentdiv.filters.length>0)? true : false //test if element supports transitions and has one defined
var slideshow=this
flashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=1}, "mouseover")
flashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=0}, "mouseout")
setInterval(function(){slideshow.rotate()}, this.pause)
}
flashyslideshow.addEvent=function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},
flashyslideshow.setopacity=function(el, degree){ //sets opacity of an element (FF and non IE browsers only)
if (typeof el.style.opacity!="undefined")
el.style.opacity=degree
else
el.style.MozOpacity=degree
el.currentopacity=degree
},
flashyslideshow.prototype.getSlideHTML=function(index){
var slideHTML=(this.imagearray[index][1])? '<a href="'+this.imagearray[index][1]+'" target="'+this.imagearray[index][2]+'">\n' : '' //hyperlink slide?
slideHTML+='<img src="'+this.imagearray[index][0]+'" />'
slideHTML+=(this.imagearray[index][1])? '</a><br />' : '<br />'
slideHTML+=(this.imagearray[index][3])? this.imagearray[index][3] : '' //text description?
return slideHTML //return HTML for the slide at the specified index
}
flashyslideshow.prototype.rotate=function(){
var contentdiv=document.getElementById(this.wrapperid+"_inner")
if (this.isMouseover){ //if mouse is over slideshow
return
}
this.currentimg=(this.currentimg<this.imagearray.length-1)? this.currentimg+1 : 0
if (this.filtersupport){
contentdiv.filters[0].apply()
}
else{
flashyslideshow.setopacity(contentdiv, 0)
}
contentdiv.innerHTML=this.getSlideHTML(this.currentimg)
if (this.filtersupport){
contentdiv.filters[0].play(this.transduration)
}
else{
contentdiv.fadetimer=setInterval(function(){
if (contentdiv.currentopacity<1)
flashyslideshow.setopacity(contentdiv, contentdiv.currentopacity+0.1)
else
clearInterval(contentdiv.fadetimer)
}, 50) //end setInterval
}
}
</script>
HTML
<script type="text/javascript">
var flashyshow=new flashyslideshow({ //create instance of slideshow
wrapperid: "myslideshow", //unique ID for this slideshow
wrapperclass: "flashclass", //desired CSS class for this slideshow
imagearray: [
["http://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Maceio_Alagoas_Brasil.PNG/180px-Maceio_Alagoas_Brasil.PNG", "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer getaway."],
["http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Windbuchencom.jpg/250px-Windbuchencom.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],
[http://tbn3.google.com/images?q=tbn:RaCzed35eJ1SvM:http://i28.photobucket.com/albums/c250/HoChinhMi/TypicalDutchSpring__byjaaphart-Jaap.jpg, "", "", "Flowers spring back to life in Spring."],
[http://tbn1.google.com/images?q=tbn:UcU1K0a02oP52M:http://www.autumn-pictures.com/new-jersey-autumn8.jpg, "", "", "Ah the cool breeze of autumn."]
],
pause: 2000, //pause between content change (millisec)
transduration: 1000 //duration of transition (affects only IE users)
})
</script>
