jQueryゼロから / ナビ付きスライドショー


前回のスライドショーによくあるナビつけてみることに。
任意の写真をクリックで選べるようにします。

ナビをクリックすると自動再生されてるアニメーション(フェードイン・フェードアウト)を停止して、指定のスライドを表示、しばらく放置すると自動再生再開するようにします。
アニメーションは setInterval で再生しているので、clearInterval にて停止するだけ。アニメーション再開は一定時間操作しない時間帯を持ちたいので setTimeout で待機するようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var interval;
// スライド再生
function startSlide(wait){
    wait = wait | 0;
    var intervalTime = 3000;
    setTimeout(function(){
        interval = setInterval(function(){
            // アニメーション処理
        }, intervalTime);
    }, wait);
}

// スライド停止
function stopSlide(){
    clearInterval(interval);
}

ナビのロールオーバーとかはJavaScriptのイベントじゃなく、CSSで設定するようにしました。
あとは意外にそんな前のと変わらんので、jQueryのプラグインにして、$(セレクタ).slide(オプション) でスライドショーになるようにしてみた。
サンプル

ナビ付きスライドショー – jsdo.it – share JavaScript, HTML5 and CSS

「jQueryゼロから / ナビ付きスライドショー」への5件のフィードバック

  1. こんにちは。スライドショーを探していたらこちらにたどりつきました。
    まさに理想のものなのですが、リンク先を別窓にしない(htmlのtarget=_blankを無しで)にしようと思ったら、どうすればよいのでしょうか?
    slide.jsのカスタマイズがよくわかりません。
    ご教授頂けましたら幸いです。

    1. 返信遅くなり申し訳ありません!
      最初の方にある下記部分の

      1
      2
      3
      4
      5
      6
      var defaults = {
          fadeTime: 1000,
          intervalTime: 3000,
          waitTime: 5000,
          window: true
      };

      window: true → window: false
      で大丈夫です。

  2. はじめまして。ナビ付のシンプルなスライドショーを探していたらこちらにたどりつきました。
    javascriptは全くわからないのでまんま使わせていただけて感謝しております。
    特にリンクを貼らずにスライドだけするようにしたいのですが、それは可能でしょうか。
    今のところ、jsの5行目をコメントにして//window: true
    htmlで<a href=”#”>にし、cssでカーソルをノーマルにしています。しかし、リンク先がないのに<a href=”#”>が入ってるのはやっぱりなんだかおかしいので、リンクなしでスライド&ナビボタンだけ動いてくれればうれしいのです。
    ご教授頂けましたら幸いです。

    1. jsは<a>タグ前提になっているので、少し作り変えないとですね。
      そこを<img>タグに置き換えて、リンクを調べる部分をなくしてみました。
      指摘いただいたように CSS もスライド画像の cursor: pointer; を消してます。
      参考までに。
      http://yurubu.org/dev/jquery/17_slide-2.html

      随分と古くなってますが、使って頂いてありがとうございます!
      最近はスマホ対応しているものなどたくさんありますのでイロイロ試してみることをオススメします。

コメントを残す

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