スライドショー

スライドショー

スライドショーのプラグインだといろいろできなくてさ。で、引っ張ってきた。

クリックリ変わるスライドショー

[HEAD:ar_0s_black 45px]ヘッド部分[/HEAD]

<script type="text/javascript"><!--
   // 画像の数
   var imgs = 16;
   // 切替秒数(ミリ秒)
   var inttime = 1000;
   
   // 関数１★指定番号の画像に差し替える関数
   function showimage(num) {
      var imagename = "./" + num + ".jpg";
      document.getElementById('slideshow').src = imagename;
   }
   
   // 関数２★1番画像から順に表示させる関数
   var imgcount=1;
   function slideimage() {
      if( imgcount > imgs ) {
         imgcount = 1;
      }
      showimage( imgcount );
      imgcount++;
   }
   
   // 関数３★スライドショーを開始する関数
   var slideid;
   function startshow() {
      stopshow();
      slideid = setInterval("slideimage()",inttime);
   }
   
   // 関数４★スライドショーを停止する関数
   function stopshow() {
      clearInterval(slideid);
   }
// --></script>
<style type="text/css"><!--
   /* スライドショー表示領域 */
   div.photobox {
      text-align: center;
   }
   div.photobox img {
      border: gray 3px solid;
   }
   /* 操作ボタン表示領域 */
   div.controlbox {
      text-align: center;
      margin: 0.3em 0px 1em 0px;
   }
--></style>

[HEAD:ar_0s_black 45px]ボディ部分[/HEAD]

<!-- スライドショーステージ -->
<div class="photobox">
   <img src="slideshow.jpg" id="slideshow" alt="スライドショー表示領域">
</div>
<!-- 開始/終了ボタン 勝手にまわしたければ body の Onload を使って軌道をかける -->
<div class="controlbox">
   <input type="button" value="- 開始 -" onclick="startshow();">
   <input type="button" value="- 停止 -" onclick="stopshow();">
</div>
<!-- body に Onload をつけて起動する方法 -->
<body onLoad="startshow();">

もやんもやん変わるスライドショー

[HEAD:ar_0s_black 45px]ヘッド部分[/HEAD]

<!-- スライドショー -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style type="text/css">
#slideshow {
   position: relative;
   width:  640px; /* 画像の横幅に合わせて記述 */
   height: 270px; /* 画像の高さに合わせて記述 */
}
#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}
</style>
<script type="text/javascript">
function slideSwitch() {
   var $active = $('#slideshow img.active');

   if ( $active.length == 0 ) $active = $('#slideshow img:last');

   var $next =  $active.next().length ? $active.next()
      : $('#slideshow img:first');

   $active.addClass('last-active');

   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
           $active.removeClass('active last-active');
      });
}

$(function() {
   setInterval( "slideSwitch()", 3000 ); /* 画像交換間隔(ミリ秒指定) */
});
</script>
<!-- / スライドショー -->

[HEAD:ar_0s_black 45px]ボディ部分[/HEAD]

<!-- スライドショー -->
<p id="slideshow">
   <img src="photo1.jpg" alt="画像1" class="active">
   <img src="photo2.jpg" alt="画像2">
   <img src="photo3.jpg" alt="画像3">
   <img src="photo4.jpg" alt="画像4">
   <img src="photo5.jpg" alt="画像5">
</p>
<!-- / スライドショー -->

[HEAD:check 17px,easy,s:16px,c:#cc0000]交換したい分だけ画像を img を入れておく ※最初の１行目に class が付いてるの注意[/HEAD]