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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

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

解決済

2回答

3293閲覧

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

Scarlett

総合スコア12

CSS3

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

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クリップ

投稿2017/09/23 14:09

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

前提・実現したいこと

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

実現したいこと

  • スライダー枚数切り替えボタンをクリックすると前後のイメージを表示

(表示を切り替えたイメージから自動再生を再開する)

前提

(済)は実装済です。

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

(表示を切り替えたイメージから自動再生を再開する)

問題点

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

補足

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

  • 1枚目のイメージを表示中にprevを押すと3枚目へ
  • 3枚目のイメージを表示中にnextを押すと1枚目へ

の処理が上手くいってないかもしれません。

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

html

1 2 <h1 id="hero-logo" class="l-logo"> 3 <a href="index.html" class="logo"><img src="./img/logo.svg" alt=""></a> 4 </h1> 5 <div class="l-slider"> 6 <div id="slider" class="slider__inner"> 7 <ul> 8 <li><img src="https://placehold.jp/150x50.png" alt=""></li> 9 <li><img src="https://placehold.jp/250x150.png" alt=""></li> 10 <li><img src="https://placehold.jp/350x150.png" alt=""></li> 11 </ul> 12 <a id="prev">prev</a> 13 <a id="next">next</a> 14 </div> 15 </div> <!-- SCRIPTS --> 16<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 17 <script type="text/javascript"> 18 $(function() { 19 $('#slider ul').autoChange({ 20 effect: 'fade', 21 type: 'repeat', 22 timeout: 3000, 23 speed: 1000 24 }) 25 }); 26 </script> 27

css

1/* ===================== 2 slider 3===================== */ 4 5#slider { 6 position: relative; 7 height: auto; 8 overflow: hidden; 9 ul { 10 margin: 0; 11 padding: 0; 12 } 13 li { 14 width: 100%; 15 position: absolute; 16 margin: 0; 17 padding: 0; 18 } 19 img { 20 width: 100%; 21 height: auto; 22 } 23} 24 25.slider__inner:hover #prev, 26.slider__inner:hover #next { 27 opacity: .5; 28 transition: .35s 29} 30 31#prev, 32#next { 33 opacity: 0; 34 display: block; 35 position: absolute; 36 top: 50%; 37 z-index: 500; 38 width: 100px; 39 height: 40px; 40 transition: .25s; 41 cursor: pointer; 42 color: transparent; 43} 44#prev { 45 left: 0; 46} 47 48#next { 49 right: -18px; 50 margin-right: 20px; 51} 52 53#prev:before, 54#next:before { 55 display: block; 56 content: ""; 57 position: absolute; 58 top: 50%; 59 width: 50px; 60 height: 50px; 61 margin-top: -25px; 62 border-radius: 50%; 63 background: #000; 64} 65 66#next:before { 67 right: 50px; 68} 69 70#prev:before { 71 left: 50px; 72} 73 74#prev:after, 75#next:after { 76 display: block; 77 content: ""; 78 position: absolute; 79 top: 50%; 80 width: 0; 81 height: 0; 82 margin-top: -20px; 83 border: 20px solid transparent; 84} 85 86#next:after { 87 right: 42px; 88 margin-top: -20px; 89 border-left: 20px solid #fff; 90} 91 92#prev:after { 93 left: 38px; 94 margin-top: -20px; 95 border-right: 20px solid #fff; 96}

js

1$.fn.autoChange = function (config) { 2 var options = $.extend({ 3 effect: 'fade', 4 type: 'repaet', 5 timeout: 3000, 6 speed: 1000 7 }, config); 8 9 return this.each(function () { 10 var current = 0; 11 var next = 1; 12 var elementP = $(this); 13 var element = $(elementP).children(); 14 15 var windowH = $(window).height(); 16 var logo = $('#hero-logo').height(); 17 18 $(element).hide(); 19 $(element[0]).show(); 20 21 function elementHeight() { 22 $('#slider').css('height', windowH - logo - 60 + 'px'); 23 }; 24 elementHeight(); 25 $(window).on('resize', function () { 26 elementHight(); 27 }); 28 var change = function () { 29 $('#next').click(function () { 30 if (current == 3) { 31 current = element.length - 1; 32 next = 0; 33 } else { 34 current += 1; 35 } 36 change(); 37 return false; 38 }); 39 $('#prev').click(function () { 40 if (current == 0) { 41 current = element.length - 1; 42 next = 2; 43 } else { 44 current -= 1; 45 } 46 change(); 47 return false; 48 }); 49 if (options.effect == 'fade') { 50 $(element[current]).fadeOut(options.speed); 51 $(element[next]).fadeIn(options.speed); 52 } else if (options.effect == 'slide') { 53 $(element[current]).slideUp(options.speed); 54 $(element[next]).slideDown(options.speed); 55 } 56 57 if (options.type == 'repeat') { 58 if ((next + 1) < element.length) { 59 current = next; 60 next++; 61 } else { 62 current = element.length - 1; 63 next = 0; 64 } 65 } 66 67 if (options.type == 'stop') { 68 if ((next + 1) < element.length) { 69 current = next; 70 next++; 71 } else { 72 return; 73 } 74 } 75 }; 76 var timer = setInterval(function () { 77 change(); 78 }, options.timeout); 79 80 }); 81};

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

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

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

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

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

guest

回答2

0

ベストアンサー

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

投稿2017/09/24 03:01

編集2017/09/24 03:03
deigo

総合スコア200

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

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

Scarlett

2017/09/28 07:46 編集

回答ありがとうございます。 色々試してみて、まだ詰まっておりましてeachの中で関数宣言しているものはeachの外へ出しました。 1) if文で、 is(":animated") でアニメーションしていたら change() を止める 2) 自動再生のアニメーション( change() )を使わず次の画像を $(element[current]).fadeOut(options.speed) と $(element[next]).fadeIn(options.speed) で表示 を試みて意図したように動かず、他にも ・ setTimeout ・ stop() など使用して居ましたが、やはり動きませんでした。 大変恐縮なのですが…このような場合どのように書けば宜しいのかご教授いただけましたら、大変有難く思います。 知識不足で申し訳ありませんが、何卒よろしくお願いいたします。
guest

0

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

CSS

1li { 2 /*非表示なスタイル*/ 3} 4li.active{ 5 /*表示なスタイル*/ 6}

Javascript

1function next(){ 2 var li = $(".active"); 3 var lis= li.closest("ul").find("li"); 4 5 if (li.is(":animated")) return; 6 lis.removeClass(".active"); 7 li.next().addClass(".active"); 8} 9 10function prev(){ 11 var li = $(".active"); 12 var lis= li.closest("ul").find("li"); 13 14 if (li.is(":animated")) return; 15 lis.removeClass(".active"); 16 li.prev().addClass(".active"); 17} 18 19$(function(){ 20 $("#next").on("click", function(){ 21 next(); 22 }); 23 $("#prev").on("click", function(){ 24 prev(); 25 }); 26 setInterval(function(){ 27 next(); 28 }, 1000); 29});

投稿2017/09/30 07:02

deigo

総合スコア200

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

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

deigo

2017/10/02 14:34

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

2017/10/15 13:30

すみません、お礼遅くなりました。 色々試してみて、なかなか動かなかったのでfadeIn/fadeOutでもっと簡単に組み直して動かしました。 色々試してみて、いい勉強になりました。 (関係ないですが、私もピングドラム好きです。始終すごく気になってました…) 教えていただいてありがとうございます。
deigo

2017/10/16 13:18

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

2017/10/16 18:19

こちらこそ、ありがとうございました。 ピングドラムも好きですが、監督が好きで。 この業界で、ピングドラムお好きな方と初めてお会いしたので、少し感動しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問