▲PAGE TOP

背景画像を全画面表示にしてスライドさせる(フェードアウトさせる)jQuery

背景画像を全画面表示にしてスライドさせる(フェードアウトさせる)jQuery

参考元:http://pannyatto.firebird.jp/archives/243

設定方法

  1. スライダーjQuery(jquery.maximage.zip)をダウンロードしてサーバにアップロードする
  2. Bloggerダッシュボード>レイアウト>HTML/Javascriptガジェットを追加する
  3. コンテンツ内に以下のタグを入力して保存する
******は、それぞれサーバのURLに変更する


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://******/java/bgslider/jquery.maximage.js" type="text/javascript"></script>
<style type="text/css">
img.bgmaximage{
  position:fixed !important;
  display:none;
}
</style>

<img src="http://*****/img/bg1.jpg" alt="" class="bgmaximage" />
<img src="http://*****/img/bg2.jpg" alt="" class="bgmaximage" />
<img src="http://*****/img/bg3.jpg" alt="" class="bgmaximage" />
<img src="http://*****/img/bg4.jpg" alt="" class="bgmaximage" />
<img src="http://*****/img/bg5.jpg" alt="" class="bgmaximage" />
<img src="http://*****/img/bg6.jpg" alt="" class="bgmaximage" />
<img src="http://*****/img/bg7.jpg" alt="" class="bgmaximage" />
<img src="http://*****/img/bg8.jpg" alt="" class="bgmaximage" />

<script type="text/javascript">
$(function(){
  jQuery('img.bgmaximage').maxImage({
    isBackground: true,
    slideShow: true,
    slideShowTitle: false,
    slideDelay: 10,
    overflow: 'auto',
    verticalAlign:'center'
  });
});
</script>









COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)