jQuery でスライドショー 2010.01.15記

  戻る

s3Slider jQuery plugin

  http://www.serie3.info/s3slider/

HTML

<div id="slider">
  <ul id="sliderContent">
    <li class="sliderImage">
      <img src="./files/20100115/s1.jpg" />
      <span class="top"><strong>オアシス21</strong><br />
      背後右にある高層ビルはNHK名古屋</span>
    </li>
    <li class="sliderImage">
      <img src="./files/20100115/s2.jpg" />
      <span class="bottom"><strong>瑠璃光橋あたり</strong><br />
      桜の咲いている頃</span>
    </li>
    <li class="sliderImage">
      <img src="./files/20100115/s3.jpg" />
      <span class="top"><strong>お茶の水</strong><br />
      お茶の水橋からみた神田川とJRお茶の水の駅</span>
    </li>
    <li class="sliderImage">
      <img src="./files/20100115/s2.jpg" />
      <span class="bottom"><strong>瑠璃光橋あたり<br />
      この説明が上・下・上・下の順になるようにしました</span>
    </li>
    <div class="clear sliderImage"></div>
  </ul>
</div>

ヘッダ JavaScript

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="/common/s/s3Slider.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#slider').s3Slider({
      timeOut: 3000; //この数字が画像が切り替わるタイミング（3000ミリ秒＝3秒）
    });
  });
</script>

ここでは、ｊQuery は Google AJAX Libraries API を利用してロードしています。

CSS

<style type="text/css" media="screen">
#slider {
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.sliderImage {
  float: left;
  position: relative;
  display: none;
}
.sliderImage span {
  position: absolute;
  font: 10px/15px Arial, Helvetica, sans-serif;
  padding: 10px 13px;
  width: 374px;
  background-color: #000;
  filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
  opacity: 0.7;
  color: #fff;
  display: none;
}
.clear { clear: both; }
.sliderImage span strong {
  font-size: 14px;
}
.top { top: 0; left: 0; }
.bottom { bottom: 0; left: 0; }
#slider li { 
  list-style-type: none; 
}
</style>

アーカイブについていたサンプルを参考に当サイトで表示できるように調整しました