[JS]jqueryを使ったXMLで管理するスライドショー

以前作った2つのスライドショーをXMLで管理できるように、若干変更しました。 詳しくは、下記のデモ・サンプルファイルを見てください。

デモ

サンプルファイルダウンロード

サンプルのダウンロード(クロスフェード)

サンプルのダウンロード(左右にスライド)

Javascriptの勉強におすすめです!!

コメント

  1. yotigory on 08/10/2012 at 2:58 PM said:

    はじめまして、今の仕事にバッチリ使えそうなのですが、中身を変更(項目などの追加)してサンプルデータを使用することは可能でしょうか?
    ライセンスのことの記載がなかったように思いましたので、コメントいたしました。

    回答いただけると助かります~

  2. MELLOWDOWN on 08/10/2012 at 3:02 PM said:

    yotigory様

    サンプルデータですが、ご自由にお使いいただいて大丈夫です!
    ただ、js内のクレジットを残しておいていただければと思います。

  3. Pingback: jquery画像スライドショー | Web制作ノート | WEB DESIGN LAB

  4. takaya on 10/25/2013 at 11:19 PM said:

    はじめまして、とても使いやすそうなのですが、可視領域を12枚に広げて、最後の画像が見えたら最初に戻るようにしたいと思っています。
    そうした設定は可能でしょうか?

  5. takaya on 10/25/2013 at 11:27 PM said:

    言葉足らずですみません。
    左右にスライドするスライドショーで、可視領域の幅を12枚分に広げて、最後の画像が右端に見えたら最初に戻るようにしたいと思っています。
    そうした設定は可能でしょうか?

    可視領域を広げるのはcssデできました。

    スクリプト内の数字
    var currentNo = 0;
    var oldNo = 0;
    を変えてみたのですが、特に変化がなく、教えていただけると嬉しく思います。

    お忙しいところ恐れ入りますが、よろしくお願いいたします。

  6. takaya on 10/28/2013 at 8:38 PM said:

    すみません、自己完結しました。

    var roopNo = 任意の数字
    を追加して
    if (currentNo >= imageNum)

    if (currentNo+roopNo >= imageNum)
    へ変更しました。

    お騒がせいたしました

  7. yuri on 03/13/2015 at 11:28 AM said:

    はじめまして。こちらのスライドショーを使用させていただきたいと思っているのですが、スライドをループ再生するのではなく、最後の画像で停止するような設定に変更したいのですが、どの部分を修正すればよいのかわかりませんでした。
    お手数ですが、ご回答いただけますでしょうか。
    よろしくお願いいたします。

  8. MELLOWDOWN on 03/25/2015 at 3:11 PM said:

    テストはしておりませんが、恐らく下記で停止すると思います。

    function setNo() {
    oldNo = currentNo;
    currentNo++;
    if (currentNo >= imageLength) {
    currentNo = 0;
    clearInterval(tid);
    } else {
    changeImage();
    }
    }

  9. yuri on 03/27/2015 at 7:05 PM said:

    教えていただいたように修正したところ、問題なく解決に至ることができました。ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation