トップ  >  2010年  >  - 20100115 jQuery でスライドショー(s3Slider)
features
jQuery でスライドショー
2010.01.15記

  戻る

s3Slider jQuery plugin

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

  • オアシス21
    背後右にある高層ビルはNHK名古屋
  • 瑠璃光橋あたり
    桜の咲いている頃
  • お茶の水
    お茶の水橋からみた神田川とJRお茶の水の駅
  • 瑠璃光橋あたり
    この説明が上・下・上・下の順になるようにしました


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>
ここでは、jQuery は 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>
アーカイブについていたサンプルを参考に当サイトで表示できるように調整しました
前
2010.01.15 jQuery でスライドショー
カテゴリートップ
2010年

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999 keibunsya all right reserved.