NetCommons Test and Study Site


  Product By K.Nagai
 
 

画像2・スライドショウ

画像のスライドショウをJavaScriptで試してみた。NetCommonsには、既定のモジュールに「フォトアルバム」があり、これを利用すれば、スライドショウは表示出来る。この事例では、ボタンで開始と停止が出来る程度の違い。尚、ショウの時間間隔の設定は5秒。

ゆり

    表示間隔: 
1から15迄の整数小文字を入れて開始をクリックするとその間隔で動作します。
この事例では、5枚の写真(画像1のメニューで利用したもの)を利用しており、前提として画像のアップロードした時の画像のURL(id=)が連続していること。
1.初期画像をアップロード後、HTML編集で「id="img1」を入れる。
 img1は任意の文字列。
2.JavaScriptのソース
imgs=new Array(5);
interval = 0;
for (var i=0;i<5;i++){
  imgs[i]=new Image();
  imgs[i].src="./?action=common_download_main&upload_id="+(159+i);
}
var n=0;
function change(){
   document.getElementById("img1").src=imgs[n].src;
   n++;
   if(n==5){n=0}
}
function kaisi(){
  interval = document.sshowform.intervalset.value;
  var err_cnt = 0;
  for (i=0; i<=interval.length-1; i++){
      char = interval.charAt(i);
      if (char < "0" || char > "9"){
        err_cnt=err_cnt+1; }
  }
  if(interval<1 || interval>15){
    err_cnt=err_cnt+1;}
  if (err_cnt > 0){
      alert("Input data Error");
      }
      else{
   interval = parseInt(document.sshowform.intervalset.value)*1000;
   timer1=setInterval("change()",interval);
          }
}
function teisi(){
   clearInterval(timer1);
}

 
Copyright(c) 2010 K.Nagai All Rights Reserved.