質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.99%

  • JavaScript

    13873questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7565questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    5834questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    4821questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    1752questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

スライダーの挙動(送りボタンのクリック処理)についての解決策

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 314

Scarlett

score 4

スライダー実装で困っていることがあり、教えていただきたく思います。

 前提・実現したいこと

動的なサンプルコード
https://playcode.io/35162/

 実現したいこと

  • スライダー枚数切り替えボタンをクリックすると前後のイメージを表示
    (表示を切り替えたイメージから自動再生を再開する)

 前提

(済)は実装済です。

  1. 画面のサイズを取得して、表示されているロゴの高さの余りの高さいっぱいにイメージ表示(済)
  2. スライダー自動再生(済)
  3. スライダーの上にマウスオーバーすると、枚数切り替えボタン表示(済)
  4. スライダー枚数切り替えボタンをクリックすると前後のイメージを表示
    (表示を切り替えたイメージから自動再生を再開する)

 問題点

ボタンをクリックするとイメージは変わるが、他の処理が重なってるのか、別のイメージへ変更し続けるなど、不安定な挙動を起こします。

 補足

3枚表示させたいのですが

  • 1枚目のイメージを表示中にprevを押すと3枚目へ
  • 3枚目のイメージを表示中にnextを押すと1枚目へ
    の処理が上手くいってないかもしれません。

大変恐縮なのですが、解決策をご教示ください。
どうぞよろしくお願いいたします。

        <h1 id="hero-logo" class="l-logo">
            <a href="index.html" class="logo"><img src="./img/logo.svg" alt=""></a>
        </h1>
        <div class="l-slider">
            <div id="slider" class="slider__inner">
                <ul>
                    <li><img src="https://placehold.jp/150x50.png" alt=""></li>
                    <li><img src="https://placehold.jp/250x150.png" alt=""></li>
                    <li><img src="https://placehold.jp/350x150.png" alt=""></li>
                </ul>
                <a id="prev">prev</a>
                <a id="next">next</a>
            </div>
        </div>   <!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#slider ul').autoChange({
                effect: 'fade',
                type: 'repeat',
                timeout: 3000,
                speed: 1000
            })
        });
    </script>
/* =====================
  slider
===================== */

#slider {
    position: relative;
    height: auto;
    overflow: hidden;
    ul {
        margin: 0;
        padding: 0;
    }
    li {
        width: 100%;
        position: absolute;
        margin: 0;
        padding: 0;
    }
    img {
        width: 100%;
        height: auto;
    }
}

.slider__inner:hover #prev,
.slider__inner:hover #next {
    opacity: .5;
    transition: .35s
}

#prev,
#next {
    opacity: 0;
    display: block;
    position: absolute;
    top: 50%;
    z-index: 500;
    width: 100px;
    height: 40px;
    transition: .25s;
    cursor: pointer;
    color: transparent;
}
#prev {
    left: 0;
}

#next {
    right: -18px;
    margin-right: 20px;
}

#prev:before,
#next:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    border-radius: 50%;
    background: #000;
}

#next:before {
    right: 50px;
}

#prev:before {
    left: 50px;
}

#prev:after,
#next:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -20px;
    border: 20px solid transparent;
}

#next:after {
    right: 42px;
    margin-top: -20px;
    border-left: 20px solid #fff;
}

#prev:after {
    left: 38px;
    margin-top: -20px;
    border-right: 20px solid #fff;
}
$.fn.autoChange = function (config) {
    var options = $.extend({
        effect: 'fade',
        type: 'repaet',
        timeout: 3000,
        speed: 1000
    }, config);

    return this.each(function () {
        var current = 0;
        var next = 1;
        var elementP = $(this);
        var element = $(elementP).children();

        var windowH = $(window).height();
        var logo = $('#hero-logo').height();

        $(element).hide();
        $(element[0]).show();

        function elementHeight() {
            $('#slider').css('height', windowH - logo - 60 + 'px');
        };
        elementHeight();
        $(window).on('resize', function () {
            elementHight();
        });
        var change = function () {
            $('#next').click(function () {
                if (current == 3) {
                    current = element.length - 1;
                    next = 0;
                } else {
                    current += 1;
                }
                change();
                return false;
            });
            $('#prev').click(function () {
                if (current == 0) {
                    current = element.length - 1;
                    next = 2;
                } else {
                    current -= 1;
                }
                change();
                return false;
            });
            if (options.effect == 'fade') {
                $(element[current]).fadeOut(options.speed);
                $(element[next]).fadeIn(options.speed);
            } else if (options.effect == 'slide') {
                $(element[current]).slideUp(options.speed);
                $(element[next]).slideDown(options.speed);
            }

            if (options.type == 'repeat') {
                if ((next + 1) < element.length) {
                    current = next;
                    next++;
                } else {
                    current = element.length - 1;
                    next = 0;
                }
            }

            if (options.type == 'stop') {
                if ((next + 1) < element.length) {
                    current = next;
                    next++;
                } else {
                    return;
                }
            }
        };
        var timer = setInterval(function () {
            change();
        }, options.timeout);

    });
};
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

これchange()を叩く度にclickイベントにchange()が追加されてませんか?
eachの中で関数宣言してるやつ(elementHeightとchange)も危険ですね。
あと、ほかのアニメーションが動いているかを判断してはじいた方がいいです。これはis(":animated")とかで判定できるはずです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/28 16:46 編集

    回答ありがとうございます。
    色々試してみて、まだ詰まっておりましてeachの中で関数宣言しているものはeachの外へ出しました。

    1) if文で、 is(":animated") でアニメーションしていたら change() を止める
    2) 自動再生のアニメーション( change() )を使わず次の画像を $(element[current]).fadeOut(options.speed) と $(element[next]).fadeIn(options.speed) で表示
    を試みて意図したように動かず、他にも

    ・ setTimeout
    ・ stop()
    など使用して居ましたが、やはり動きませんでした。

    大変恐縮なのですが…このような場合どのように書けば宜しいのかご教授いただけましたら、大変有難く思います。
    知識不足で申し訳ありませんが、何卒よろしくお願いいたします。

    キャンセル

0

こんな感じですかね?
検証してないので動かなかったらごめんなさい。

li {
  /*非表示なスタイル*/
}
li.active{
  /*表示なスタイル*/
}
function next(){
  var li = $(".active");
  var lis= li.closest("ul").find("li");

  if (li.is(":animated")) return;
  lis.removeClass(".active");
  li.next().addClass(".active");
}

function prev(){
  var li = $(".active");
  var lis= li.closest("ul").find("li");

  if (li.is(":animated")) return;
  lis.removeClass(".active");
  li.prev().addClass(".active");
}

$(function(){
  $("#next").on("click", function(){
    next();
  });
  $("#prev").on("click", function(){
    prev();
  });
  setInterval(function(){
    next();
  }, 1000);
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/02 23:34

    ごめんなさいclassだとアニメーションが難しいので
    addClass/removeClassしてる箇所はfadeOutとかに読み替えてください・・・

    キャンセル

  • 2017/10/15 22:30

    すみません、お礼遅くなりました。
    色々試してみて、なかなか動かなかったのでfadeIn/fadeOutでもっと簡単に組み直して動かしました。
    色々試してみて、いい勉強になりました。

    (関係ないですが、私もピングドラム好きです。始終すごく気になってました…)
    教えていただいてありがとうございます。

    キャンセル

  • 2017/10/16 22:18

    BAありがとうございます。
    輪るピングドラムは名作です。

    キャンセル

  • 2017/10/17 03:19

    こちらこそ、ありがとうございました。

    ピングドラムも好きですが、監督が好きで。
    この業界で、ピングドラムお好きな方と初めてお会いしたので、少し感動しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13873questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7565questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    5834questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    4821questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    1752questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。