簡単にクールなスライダーが実装できるjQueryプラグイン　Nivo slider

1
2
3
4
5
6

<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<link rel="stylesheet" type="text/css" href="js/nivo-slider.css"/>
<link rel="stylesheet" type="text/css" href="js/themes/default/default.css"/>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>

<link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/base.js"></script> <link rel="stylesheet" type="text/css" href="js/nivo-slider.css"/> <link rel="stylesheet" type="text/css" href="js/themes/default/default.css"/> <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
        effect:'fade',
	animSpeed:500,
        pauseTime:6000,
});
});
</script>

<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect:'fade', animSpeed:500, pauseTime:6000, }); }); </script>

1
2
3
4
5
6
7
8
9

<div class="slider-wrapper theme-default">    
<div id="slider" class="nivoSlider">
<img src="images/top_img_f01.jpg" width="725" height="223">
<img src="images/top_img_f02.jpg" width="725" height="223">
<img src="images/top_img_f03.jpg" width="725" height="223">
<img src="images/top_img_f04.jpg" width="725" height="223">
<img src="images/top_img_f05.jpg" width="725" height="223">
</div>
</div>

<div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="images/top_img_f01.jpg" width="725" height="223"> <img src="images/top_img_f02.jpg" width="725" height="223"> <img src="images/top_img_f03.jpg" width="725" height="223"> <img src="images/top_img_f04.jpg" width="725" height="223"> <img src="images/top_img_f05.jpg" width="725" height="223"> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$(function(){
    $('#slider').nivoSlider({
        effect:'random', // スライド時のアニメーション
        slices:6, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:500, // アニメーションの速度(ms)
        pauseTime:3000, // 画像の停止時間(ms)
        startSlide:0, // 初めに表示する画像位置(0から)
        directionNav:true, // 前・次ボタンを表示
        directionNavHide:true, // マウスホバー時のみナビゲーションを表示
        pauseOnHover:true, // マウスホバー時に切り替えを一時停止
        controlNav:true, // コントロールナビの表示
        controlNavThumbs:false, // コントロールナビに画像サムネイルを使用
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // スライドをキーボードで操作
        manualAdvance:false, // 自動スライドしない
        captionOpacity:0.8, // キャプションの透過度
        prevText: 'Prev', // 前ボタンの名前
        nextText: 'Next', // 次ボタンの名前
  });
});

$(function(){ $('#slider').nivoSlider({ effect:'random', // スライド時のアニメーション slices:6, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed:500, // アニメーションの速度(ms) pauseTime:3000, // 画像の停止時間(ms) startSlide:0, // 初めに表示する画像位置(0から) directionNav:true, // 前・次ボタンを表示 directionNavHide:true, // マウスホバー時のみナビゲーションを表示 pauseOnHover:true, // マウスホバー時に切り替えを一時停止 controlNav:true, // コントロールナビの表示 controlNavThumbs:false, // コントロールナビに画像サムネイルを使用 controlNavThumbsFromRel:false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav:true, // スライドをキーボードで操作 manualAdvance:false, // 自動スライドしない captionOpacity:0.8, // キャプションの透過度 prevText: 'Prev', // 前ボタンの名前 nextText: 'Next', // 次ボタンの名前 }); });