スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スライドショー(Nivo Slider)カスタマイズ#1

使用サンプル:Nivo Slider

effectをデフォルトのrandomにしておくと、IE6で画像の切替が挙動不審。boxRainにしておくと、安定します…なんでだろ。ちなみにNivo SliderはIE6非対応らしいです…。
このスライドショーは画像からリンクをはることができるので、バナーの切替アニメとしても使えそうです。

JavaScript(function.js)
  1. $(window).load(function(){
  2. $('#slider').nivoSlider({
  3. //アニメーションの種類(random、fade、sliceUp、sliceUpDownなど)
  4. effect:'boxRain',
  5. //アニメーションのスピード
  6. animSpeed:500,
  7. //静止時間
  8. pauseTime:2000
  9. });
  10. });


CSS(style.css)


HTML
  1. <head>
  2. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
  4. <script type="text/javascript" src="js/function.js"></script>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. </head>
  7.  
  8. <body>
  9. <div class="slider-wrapper theme-default">
  10. <div id="slider" class="nivoSlider">
  11. <a href="#" target="_self"><img src="001.jpg" width="600" height="300" alt="" /></a>
  12. <a href="#" target="_self"><img src="002.jpg" width="600" height="300" alt=""
      title="#htmlcaption" /></a>
  13. <a href="#" target="_self"><img src="003.jpg" width="600" height="300" alt="" /></a>
  14. <a href="#" target="_self"><img src="004.jpg" width="600" height="300" alt="" /></a>
  15. </div>
  16. <div id="htmlcaption" class="nivo-html-caption">htmlを入れることもできます</div>
  17. </div>
  18. </body>
スポンサーサイト

コメントの投稿

非公開コメント

Profile

chiemi09

Author:chiemi09

JavaスクリプトもActionスクリプトも苦手なWebデザイナー。
せめてjQueryのカスタマイズができればと仕事の合間にお勉強中です。

Recent Entries
Archives
Theme
Search
RSS
Bookmarks
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。