CSSの背景画像でスライドショーを実装する【jQuery】[webの話]

CSSの背景画像でスライドショーを実装する【jQuery】

webの話

どうもおむすび17号です。

今回はCSSの背景画像スライドショーの実装を簡単に紹介。

簡単に実装出来るのでやってみてください。

まずCSS背景画像のスライドショーのメリットから

その1　背景画像なので上オブジェクトを置くのが容易

CSSの背景画像なので何を置いてもどことも干渉せず簡単にオブジェクトを配置出来ます。ずっと文字が出っぱなし〜とかも出来ますし、例えば違うスライドショーを上に設置して文字は文字でスライドショーを行う事だって可能です。

その2　背景画像を描画領域を決める事が出来る

例えば高さを300pxで幅100％にしたとしてブラウザサイズを広げていけば通常のライドショーなら両端に余白が出現します。しかしCSS背景ならではの「background-size」を利用して縦横比は保持して、背景領域を完全に覆う事が可能です。レスポンシブサイトにも向いています。

その3　工夫次第でスライドショーバナーなどにもなる

クライアントに対して動きの要望や、おっと言わせる対応など工夫さえすれば、様々な事に応用出来ます。

それでは実装方法です。

下記よりJSをダウンロードしてください。

bgswitcher

JSは下記のように記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.bgswitcher.js" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function($) {
    $('.slider').bgSwitcher({
        images: ['xxx.jpg', 'xxx.jpg', 'xxx.jpg'],
        interval: 5000,
        effect: "fade"
    });
});
</script>

CSSは下記のように記述します。

/* SLIDER */

.slider {
    height: 340px;
    width: 100%;
    background-color: #FFF;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 45px;
}

.slider {
    background-position: center top\9;
    background-repeat: repeat-x\9;
}

*+html .slider {
    background-position: center top;
    background-repeat: repeat-x;
}

現在は高さ340pxにしています。

背景サイズもcoverになっていますのでブラウザサイズを伸ばしていくと背景画像は拡大していきます。

HTMLはシンプルにこれだけ

<div class="slider"></div>

とてもシンプルで簡単に実装出来ます。

使い方によっては様々な事に応用出来るので是非使ってみてください！

ではでは

大卒後めでたくIT大手起業に就職するも業績不振により半年で解雇。 24歳でIT会社を起業するも失敗。その後おとなしく制作会社で5年働き18号を巻き込んでおむすびを始めました。利用する人が少しでも幸せになるwebサービスを生み出していきます。

更新日：2016-08-23

コメントを投稿する

投稿名
コメント内容
画像認証	[ 認証画像を変える ]

アナリティクスで電話番号タップをコンバージョン計測する方法

もしかしてWebの書き出し、まだpng…!?

自分で出来る！MEO(ローカルSEO)でやっておくべきこと6つ

３分でwebサイトの各端末表示確認が出来るサービス「Sizzy」

あなたのアナリティクス正確なデータとれていないかも

他社サイトのアクセス数などが分かるサービス