kdcsライブラリー

複数の画像をクロスフェードで表示させるResponsiveSlides.js
レスポンシブな作りなので画面サイズが変わっても対応し、ブラウザもIE6～いける

作者のページ＆ダウンロードは　こちらから

headへの記述

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

オプションの記述

<script>
    $(function () {
      $(".rslides").responsiveSlides({
        maxwidth: 960,
        fade: 2000,
        speed: 3000,
      });
    });
</script>

body内への記述

<ul class="rslides">
  <li><img src="1.jpg" alt="" /></li>
  <li><img src="2.jpg" alt="" /></li>
  <li><img src="3.jpg" alt="" /></li>
</ul>

cssの記述

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }