Phiên bản đầy đủ: jsB@nk » Hình ảnh » Trình diễn ảnh » Trình diễn ảnh mờ dần ngẫu nhiên
URL: https://www.javascriptbank.com/simple-random-picture-transitions-slideshow.html
Hiệu ứng trình diễn ảnh này sẽ mang đến một trong số 17 hiệu ứng chuyển tiếp cho mỗi bức ảnh được xem. Tuy nhiên hiệu ứng chuyển tiếp chỉ hoạt động trên trình duyệt IE, các trình duyệt khác sẽ bị thấy hiệu ứng mờ dần. Bạn có thể thiết lập thông tin mô tả và liên kết cho mỗi bức ảnh.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Trình diễn ảnh » Trình diễn ảnh mờ dần ngẫu nhiên
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>