うらなか書房のあやしいグッズあり〼

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他風変わりなもの・場所などの紹介をしています(たまにお役立ち情報や暗い話も書きます)。

たまに毒吐くちゃん

カテゴリー「Web関連」の人気記事TOP3

CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

time 更新日:  time 公開日:2016/08/31

数日前、「バナー画像をスライドショーで表示したい」とふと思いつきまして、作成に挑戦してみることにしました。
かなり手こずったものの、思い描いていたようなスライドショーをなんとか形にすることができたので、備忘録として以下にコードなどを載せておこうと思います。

スポンサーリンク

CSSで作るスライドショーの見本






  

  • 幅300px、高さ250px
  • フェイドイン・フェイドアウトで画像が切り替わる
  • 自動で繰り返す
  • それぞれの画像にリンクを貼ることができる

というスライドショーを作るべく試行錯誤を重ねました。
上3つは割とすぐにできたのですが、「それぞれの画像にリンクを貼ることができる」がなかなかうまくいかず(各画像に違うURLを指定しても、全て最後の画像に貼ったURLに飛んでいってしまうという)……。

どこをどうやって辿り着いたのか、こちらのページのコメント欄を発見し、こちらのスライドショーのソースを参考にさせて頂いた所、希望通りのスライドショーを実現することができました。ありがとうございます!

CSSで作るスライドショーのコード

CSSで作るスライドショーのhtml

以下のコードを、スライドショーを表示させたい部分に記述します。

aspslide」というdivのなかに、「id=”asnakami1“(以降数字が1ずつ増えていく) class=”asnakami“(こちらは変わらず)」がついたdivを入れていきます。
上記の場合はバナー画像が6個の場合です。7個目を足す場合は、

<div id="asnakami7" class="asnakami"><a href="" target="_blank"><img src=""></a></div>

となります。

CSSで作るスライドショーのCSS

以下のコードをスタイルシートに追加します。

秒数の設定

#asnakami1」などの、

30s 0s

という部分で、スライドショーの秒数を設定しています。
上記の場合は、全部で30秒、「#asnakami1」は0秒から表示、「#asnakami2」は5秒から表示……ということを表しています。

なので7枚目のバナー画像を足す場合は、上の30sを全て35sにし

#asnakami7{
-moz-animation: fadeinout 35s 30s infinite;
-webkit-animation: fadeinout 35s 30s infinite;
-o-animation: fadeinout 35s 30s infinite;
animation: fadeinout 35s 30s infinite;      
}

というコードを足します。

画像を減らす場合は、30sを25s、20s……と減らしていきます。

その他

fadeinout」は任意でつけたスライドショーの名前です。

infinite」は無限に繰り返すことを表しています。

CSSで作るスライドショーのメリット

Flashなどと違い、ほとんどのブラウザやデバイスで表示が可能です。上記はFirefoxGoogle ChromeIE11AndroidのスマホiPadで表示を確認しました(スマホとiPadはPCで見た時とちょっと挙動が異なりますが、リンクはきちんと動作しているのでまァいいかと……)。

しかしちょっと問題があって、IE9以下だともしかしたら表示がされないかも……。

#asnakami1」などに、

-ms-animation:fadeinout 35s 30s infinite;

を足せばいいのですが、そうすると今度はIE10以降で表示されなくなってしまうようなのです。

なのでやむを得ず古いバージョンのIEは切り捨てることにしました
この場合も特にエラーが出たりはせず、ただ単にその部分が空白になるだけです。

CSSで作るスライドショーのデメリット

バナー画像を増やすたびに、CSSに「#asnakami7」などを足していかないといけないことでしょうか。
バナー画像がものすごくたくさんある場合は、JavascriptやjQueryなどでスライドショーを作った方がよさそうです。

jQueryのスライダー

上とちょっとタイプが違うのですが、このブログには以下のようなスライダーも所々に設置しています。

こちらはCSSのスライダーと違いアイテム数を好きに増やしたり減らしたりできます。
WordPressだとjQueryのカプセル化というものをしないと動かないので、これもまた手こずりました。
こちらのコードも一緒に載せようかと思っていたのですが、かなり長くなってしまうので別の記事にしました。

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

こちらの記事ともども、スライドショーを作成したい方のご参考になりましたら幸いです。

スポンサーリンク

マスコットキャラ

たまに毒吐くちゃん

当ブログのマスコットキャラ「たまに毒吐くちゃん」。所々に出没します。
TSHIRTS TRINITYClubTSUZURIでTシャツ・グッズ販売中です!

AmazonなどでTシャツやグッズを販売しています

Amazon詳細ページへ
Amazon Yahoo!ショッピング TSHIRTS TRINITY  SUZURI Zazzle itaxes 価格・送料比較表