Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

Web初心者がjQuery 「ResponsiveSlides」を使って自動で画像のフェードイン・フェードアウトを実装する方法(サンプル付き)

投稿日:

jQueryでスライドメニューを実装する方法はいくつかあります。

今回も、web初心者向けにwebサイト上で配布しているスクリプトを使ってフェードイン・フェードアウトのjQueryを実装します。

このサイトで配布されているスクリプトを使ってみます。

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

ファイルをダウンロード STEP2

サイトを下にスクロールしていくと一番下に

ダウンロード

Download the latest version from GitHub」がありますのでクリックしてください。

ファイルをダウンロード

「Download ZIP」をクリックするとふぁあいる一式をダウンロードできます。

データを解凍します STEP3

「ResponsiveSlides.js-master.zip」をサイトからダウンロードして、zipファイルを解凍します。

解凍すると
ファイルの中身
データが入っています。

「demo」フォルダが入っていてその中にhtmlファイルかありますので確認ができます。

jquery.sidr.min.jsをヘッダーにリンクさせます STEP4

<script src="js/015/responsiveslides.min.js"></script>

※パスは環境に合わせて変えてください。

CSSを記述します STEP5

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

HTMLを設置します STEP6

<ul class="rslides">

	<li>
      <img src="images/015/01.jpg" />
    </li>
    <li>
      <img src="images/015/02.jpg" />
    </li>
    <li>
      <img src="images/015/03.jpg" />
    </li>
    <li>
      <img src="images/015/04.jpg" />
    </li>
    <li>
      <img src="images/015/05.jpg" />
    </li>
    <li>
      <img src="images/015/06.jpg" />
    </li>

  </ul>

※画像のパスは環境に合わせて変えてください。

実際に動く記述を書きます STEP7

<script>
$(function() {
$(".rslides").responsiveSlides({
  auto: true,             // Boolean: Animate automatically, true or false
  speed: 500,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: false,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});  });
</script>

ナビげーションをつけたかったら
「nav: false,」→「nav: true,」 にしてください。

いろいろカスタマイズが出来ますね

まとめ

[サンプル] jQuery 「ResponsiveSlides」を使ってフェードイン・フェードアウト

よくわからなかった人もいるかもしれませんが、フェードイン・フェードアウトのjQueryは、よく使われますのでぜひ試してみてください。

※firefox、クローム、IEで動いていることを確認しております。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.