Version complète: jsB@nk » Image » Diaporama » Simple Random Transitions Photo Slideshow
URL: https://www.javascriptbank.com/simple-random-picture-transitions-slideshow.html
Cet libre code JavaScript diaporama  apportera 1 de 17 effets de transition choisis au hasard à chaque image dans IE. Dans les autres, un effet de transition fondu personnalisé est appliqué. Vous pouvez définir hyperlien  et un texte descriptif pour chaque image, et le diaporama se mettra en pause lorsque l'utilisateur déplace la souris dessus.
Version complète: jsB@nk » Image » Diaporama » Simple Random Transitions Photo Slideshow
URL: https://www.javascriptbank.com/simple-random-picture-transitions-slideshow.html
<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><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, 2008var global_transitions=[ //array of IE transition strings"progid:DXImageTransform.Microsoft.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.wrapperidthis.imagearray=setting.imagearraythis.pause=setting.pausethis.transduration=setting.transduration/1000 //convert from miliseconds to seconds unit to pass into el.filters.play()this.currentimg=0var preloadimages=[] //temp array to preload imagesfor (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 utilizevar 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 elementthis.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 definedvar slideshow=thisflashyslideshow.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=degreeelseel.style.MozOpacity=degreeel.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 slideshowreturn}this.currentimg=(this.currentimg<this.imagearray.length-1)? this.currentimg+1 : 0if (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)elseclearInterval(contentdiv.fadetimer)}, 50) //end setInterval}}/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/</script><script type="text/javascript">var flashyshow=new flashyslideshow({ //create instance of slideshowwrapperid: "myslideshow", //unique ID for this slideshowwrapperclass: "flashclass", //desired CSS class for this slideshowimagearray: [["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>