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

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

新規登録して質問してみよう
ただいま回答率
85.35%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

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

jQuery

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

HTML

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

CSS

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

Q&A

1回答

887閲覧

スライダーのスライドをめくる間隔を指定したい

退会済みユーザー

退会済みユーザー

総合スコア0

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/09/11 14:02

以下のような矢印ボタンを押すと横からスライドするようなスライダーを作りましたが、クリックの間隔が0.5秒より速いとアニメーションが追い付かなくなるので、その間クリックを受け付けないようにしたいです。何かいい方法はないでしょうか?

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9<body> 10 <ul class="slides"> 11 <li class="slide active" style="background-color:red;">スライド1</li> 12 <li class="slide next-slide" style="background-color:green;">スライド2</li> 13 <li class="slide prev-slide" style="background-color:blue;">スライド3</li> 14 </ul> 15 <div class="button-box space-between-layout"> 16 <div class="change-button prev">前へ</div> 17 <div class="change-button next">次へ</div> 18 </div> 19 20 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 21 <script src="scripts/script.js"></script> 22</body> 23</html>

css

1.space-between-layout { 2 display: flex; 3 justify-content: space-between; 4} 5.slides { 6 position: relative; 7 width: 300px; 8 height: 300px; 9 margin: 0 auto; 10 overflow: hidden; 11} 12.slide { 13 list-style: none; 14 width: 100%; 15 height: 100%; 16 position: absolute; 17 top: 0; 18 left: 0; 19 transition: .5s; 20 visibility: hidden; 21} 22.active { 23 transform: translate(0); 24 visibility: visible; 25} 26.prev-slide { 27 transform: translate(-100vw); 28} 29.next-slide { 30 transform: translate(100vw); 31} 32.button-box { 33 width: 300px; 34 margin: 0 auto; 35} 36.change-button:hover { 37 cursor: pointer; 38}

javascript

1$(function() { 2 let flag = 0; 3 let index = 0; 4 $('.change-button').click(function() { 5 let $displaySlide = $('.active'); 6 const slides = $('.slide'); 7 8 slides.eq(index).removeClass('active'); 9 slides.eq((index + 1) % slides.length).removeClass('next-slide'); 10 slides.eq(index - 1).removeClass('prev-slide'); 11 12 $(this).hasClass('next') ? flag++ : flag--; 13 14 index = flag % slides.length; 15 slides.eq(index).addClass('active'); 16 slides.eq((index + 1) % slides.length).addClass('next-slide'); 17 slides.eq(index - 1).addClass('prev-slide'); 18 }) 19})

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

やってみたらそれっぽい動きになったものを載せておきます。
ボタンを押せなくする&transition終了後に元に押せるように戻すという感じでやってみました。

ボタン押せなくして、0.5病後に押せるようにするとかでも問題ないかと思います。

jQuery

1$(function() { 2 let flag = 0; 3 let index = 0; 4 $('.change-button').click(function() { 5 $(".change-button").css("pointer-events", "none"); 6 7 let $displaySlide = $('.active'); 8 const slides = $('.slide'); 9 slides.eq(index).removeClass('active'); 10 slides.eq((index + 1) % slides.length).removeClass('next-slide'); 11 slides.eq(index - 1).removeClass('prev-slide'); 12 13 $(this).hasClass('next') ? flag++ : flag--; 14 index = flag % slides.length; 15 slides.eq(index).addClass('active'); 16 slides.eq((index + 1) % slides.length).addClass('next-slide'); 17 slides.eq(index - 1).addClass('prev-slide'); 18 }) 19 20 var transitionEndEvents = [ 21 "webkitTransitionEnd", 22 "mozTransitionEnd", 23 "oTransitionEnd", 24 "transitionend" 25 ]; 26 var transitionEnd = transitionEndEvents.join(" "); 27 28 $(".slide").on(transitionEnd, function() { 29 $(".change-button").css("pointer-events", "auto"); 30 }); 31})

投稿2020/09/11 15:25

hayato7

総合スコア1135

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問