スライドボックス（jquery）

Nivo Slider

Nivo Slider
パラパラめくれながら、画像が切替るスクリプトです。

Nivo Sliderより、

• jQuery
• Nivo Slider script
• Nivo Slider CSS

をダウンロードします。

16種類の画像切替えパターンがあるので、
組合せることも可能です。

「boxRainGrow」で切換え

demo

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    setTimeout(function(){
      $('#slider').nivoSlider({
      effect:'boxRainGrow',
      pauseTime:6000,
      directionNav:false,
      pauseOnHover:false,
      controlNavThumbs:true
      });
    });
  });
</script>

<div class="mainImageCont">
<div id="slider" class="nivoSlider">
<a href="#"><img src="images/mainImage02.jpg" alt="" /></a>
<a href="#"><img src="images/mainImage01.jpg" alt="" /></a>
<a href="#"><img src="images/mainImage03.jpg" alt="" /></a>
<a href="#"><img src="images/mainImage04.jpg" alt="" /></a>
</div>
</div>

.nivoSlider{
    position:relative;
    width:640px; /* 画像幅に変更する */　
    height:375px; /* 画像の高さに変更する */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

レイアウト パターン

・デフォルト
・キャプションとリンク
・サムネイル