PHP & JavaScript Room :: 設置サンプル

実行結果

Ultimate Fade-in slideshow (v1.51) | 設置サンプル

▼自動再生+ランダム再生(マウスオーバーするとスライドショーが一時停止します)


▼自動再生

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>Ultimate Fade-in slideshow | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script type="text/javascript">
         /* **********************************************
         * Ultimate Fade-In Slideshow (v1.51): &copy; Dynamic Drive (http://www.dynamicdrive.com)
         * This notice MUST stay intact for legal use
         * Visit http://www.dynamicdrive.com/ for this script and 100s more.
         ********************************************** */

         var fadeimages=new Array();
         /* 画像パス設定 */
         fadeimages[0]=["http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg", "", ""] //plain image syntax
         fadeimages[1]=["http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg", "http://www.flickr.com/photos/22559849@N06/3143248598/", ""] //image with link syntax
         fadeimages[2]=["http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg", "http://www.flickr.com/photos/22559849@N06/3142386073/", "_new"] //image with link and target syntax
         fadeimages[3]=["http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg", "http://www.flickr.com/photos/22559849@N06/3142386067/", "_new"] //image with link and target syntax

         var fadeimages2=new Array();
         /* 画像パス設定 */
         fadeimages2[0]=["http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg", "", ""] //plain image syntax
         fadeimages2[1]=["http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg", "http://www.flickr.com/photos/22559849@N06/3143248598/", ""] //image with link syntax
         fadeimages2[2]=["http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg", "http://www.flickr.com/photos/22559849@N06/3142386073/", "_new"] //image with link and target syntax
         fadeimages2[3]=["http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg", "http://www.flickr.com/photos/22559849@N06/3142386067/", "_new"] //image with link and target syntax

         var fadebgcolor="red"

         /* NO need to edit beyond here///////////// */

         var fadearray=new Array(); /* array to cache fadeshow instances */
         var fadeclear=new Array(); /* array to cache corresponding clearinterval pointers */

         var dom=(document.getElementById) //modern dom browsers
         var iebrowser=document.all

         function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
         this.pausecheck=pause
         this.mouseovercheck=0
         this.delay=delay
         this.degree=10 /* initial opacity degree (10%) */
         this.curimageindex=0
         this.nextimageindex=1
         fadearray[fadearray.length]=this
         this.slideshowid=fadearray.length-1
         this.canvasbase="canvas"+this.slideshowid
         this.curcanvas=this.canvasbase+"_0"
         if (typeof displayorder!="undefined")
         theimages.sort(function() {return 0.5 - Math.random();})
         this.theimages=theimages
         this.imageborder=parseInt(borderwidth)
         this.postimages=new Array() /* preload images */
         for (p=0;p<theimages.length;p++){
         this.postimages[p]=new Image()
         this.postimages[p].src=theimages[p][0]
         }

         var fadewidth=fadewidth+this.imageborder*2
         var fadeheight=fadeheight+this.imageborder*2

         if (iebrowser&&dom||dom) /* if IE5+ or modern browsers (ie: Firefox) */
         document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
         else
         document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

         if (iebrowser&&dom||dom) /* if IE5+ or modern browsers such as Firefox */
         this.startit()
         else{
         this.curimageindex++
         setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
         }
         }

         function fadepic(obj){
         if (obj.degree<100){
         obj.degree+=10
         if (obj.tempobj.filters&&obj.tempobj.filters[0]){
         if (typeof obj.tempobj.filters[0].opacity=="number") /* if IE6+ */
         obj.tempobj.filters[0].opacity=obj.degree
         else /* else if IE5.5- */
         obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
         }
         else if (obj.tempobj.style.MozOpacity)
         obj.tempobj.style.MozOpacity=obj.degree/101
         else if (obj.tempobj.style.KhtmlOpacity)
         obj.tempobj.style.KhtmlOpacity=obj.degree/100
         else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
         obj.tempobj.style.opacity=obj.degree/101
         }
         else{
         clearInterval(fadeclear[obj.slideshowid])
         obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
         obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
         obj.populateslide(obj.tempobj, obj.nextimageindex)
         obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
         setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
         }
         }

         fadeshow.prototype.populateslide=function(picobj, picindex){
         var slideHTML=""
         if (this.theimages[picindex][1]!="") /* if associated link exists for image */
         slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
         slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
         if (this.theimages[picindex][1]!="") /* if associated link exists for image */
         slideHTML+='</a>'
         picobj.innerHTML=slideHTML
         }

         fadeshow.prototype.rotateimage=function(){
         if (this.pausecheck==1) /* if pause onMouseover enabled, cache object */
         var cacheobj=this
         if (this.mouseovercheck==1)
         setTimeout(function(){cacheobj.rotateimage()}, 100)
         else if (iebrowser&&dom||dom){
         this.resetit()
         var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
         crossobj.style.zIndex++
         fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
         this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
         }
         else{
         var ns4imgobj=document.images['defaultslide'+this.slideshowid]
         ns4imgobj.src=this.postimages[this.curimageindex].src
         }
         this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
         }

         fadeshow.prototype.resetit=function(){
         this.degree=10
         var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
         if (crossobj.filters&&crossobj.filters[0]){
         if (typeof crossobj.filters[0].opacity=="number") /* if IE6+ */
         crossobj.filters(0).opacity=this.degree
         else /* else if IE5.5- */
         crossobj.style.filter="alpha(opacity="+this.degree+")"
         }
         else if (crossobj.style.MozOpacity)
         crossobj.style.MozOpacity=this.degree/101
         else if (crossobj.style.KhtmlOpacity)
         crossobj.style.KhtmlOpacity=this.degree/100
         else if (crossobj.style.opacity&&!crossobj.filters)
         crossobj.style.opacity=this.degree/101
         }

         fadeshow.prototype.startit=function(){
         var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
         this.populateslide(crossobj, this.curimageindex)
         if (this.pausecheck==1){ /* IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER */
         var cacheobj=this
         var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
         crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
         crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
         }
         this.rotateimage()
         }
      </script>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1><a href='http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm'>Ultimate Fade-in slideshow (v1.51)</a> | 設置サンプル</h1>
<!-- CODE -->
         <p>▼自動再生+ランダム再生(マウスオーバーするとスライドショーが一時停止します)</p>
         <script type="text/javascript">
            //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause, optionalRandomOrder)
            new fadeshow(fadeimages, 500, 375, 0, 3000, 1, "R")
         </script>
         <br>
         <p>▼自動再生</p>
         <script type="text/javascript">
            new fadeshow(fadeimages2, 500, 375, 0, 3000, 0)
         </script>
<!-- / CODE -->
      </div>
   </body>
</html>