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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

CSS

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

Q&A

解決済

2回答

1404閲覧

jqueryでスライドを動かしたい

thed

総合スコア8

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

CSS

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

0グッド

0クリップ

投稿2016/12/01 18:46

編集2016/12/01 19:08

初めまして、jQueryについて困りごとが発生して投稿しました。
こういったSNSは初めてで、プログラミングについて勉強も追いついておらず、
何分失礼なこともあるかもしれませんが、どうかお力を貸していただければ幸いです。
###前提・実現したいこと
jQueryでスライドを正常に動かしたいです。
できましたら、下記のコードに近い形でよろしくお願いします。
###発生している問題・エラーメッセージ
下記のソースコードで途中まで作成したのですが、
0番目の画像(ねこかわいい)から「< 」ボタンを押した後、25番目に戻るループが上手くいきません。
0番目の画像から「< 」ボタンを押して戻った場合、25番目の画像が空白になってしまいます。24番目以降の画像や、直接25番目の画像選択や「>」ボタンを押して25番目の画像まで行くのは正しく画像が表示されます。

さらにこれはおそらく原因は同じかもしれませんが、
「< 」ボタンを押した後、「>」ボタンを押すと右に進まず、現在選択してる画像になります。
二回「>」ボタンを押せば進むのですが、一回で右に進むようにしたいです。
大変お手数をかけますが、よろしくお願いします。
###試したこと
変数currennt、nextをいじりました。どうも変数の理解が及んでないようです。
###補足情報(言語/FW/ツール等のバージョンなど)
CSS3、HTML5、jQuery
###プレビュー
何故か一万文字以下なのに投稿できませんでしたので外部にコードを置きました。
該当のソースコードとプレビューはこちらです。どうかよろしくお願いします。
http://jsdo.it/thed/CKu9

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

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

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

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

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

kei344

2016/12/01 19:22

teratailが不安定なため、投稿に失敗することがあるようです。ソースコードをもう一度質問文に追記してみてください。その際にはコードブロックで囲んでいただけるとありがたいです。 ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
thed

2016/12/01 19:49

すみません何度か試しましたが、現時点では無理のようです。文字数チェッカーで文字数は質問文も含め、一万以下になっていることも確認もしたのですが、コードを整理して別の時間に再投稿してみます。
kei344

2016/12/03 05:55

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
guest

回答2

0

質問のコード↓

JavaScript

1$(function(){ 2 var count = $("#slide li").length; 3 var current = 1; 4 var next = 2; 5 var interval = 270000; 6 var duration = 1000; 7 var timer; 8 9 // 1番目の写真以外は非表示 10 $("#slide li:not(:first-child)").hide(); 11 12 // 270000ミリ秒(変数intervalの値)ごとにslideTimer関数を実行 13 timer = setInterval(slideTimer, interval); 14 15 // slideTimer関数 16 function slideTimer(){ 17 $("#slide li:nth-child(+" + current + ")").fadeOut(duration); 18 $("#slide li:nth-child(+" + next + ")").fadeIn(duration); 19 20 current = next; 21 next = ++next; 22 23 if(next > count){ 24 next = 1; 25 } 26 27 $("#button li a").removeClass("target"); 28 $("#button li:nth-child("+ current +") a").addClass("target"); 29 } 30 31 function slideTimer2(){ 32 $("#slide li:nth-child(+" + current + ")").fadeOut(duration); 33 $("#slide li:nth-child(+" + --current + ")").fadeIn(duration); 34 35 next = current; 36 current = current; 37 38 if(current < 1){ 39 current = count; 40 } 41 42 $("#button li a").removeClass("target"); 43 $("#button li:nth-child("+ current +") a").addClass("target"); 44 } 45 46 $("#button li a").click(function(){ 47 next = $(this).html(); 48 49 clearInterval(timer); 50 timer = setInterval(slideTimer, interval); 51 52 slideTimer(); 53 54 return false; 55 }); 56 57 // 前へボタン 58 $("#prevBtn").click(function(){ 59 slideTimer2(); 60 }); 61 62 // 次へボタン 63 $("#nextBtn").click(function(){ 64 slideTimer(); 65 }); 66});

1点だけ、1番目のスライドで関数 slideTimer2 を実行した際に、"#slide li:nth-child(+" + --current + ")""#slide li:nth-child(+0)" になりませんか?

デベロッパーツールで console.log( current ); などを確認しつつ状況に合わせたコーディングをしてみてください。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

投稿2016/12/01 20:31

kei344

総合スコア69364

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

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

thed

2016/12/02 14:52

``` if(current < 1){ current = 26; $("#slide li:nth-child(+" + current + ")").fadeIn(duration); } $("#prevBtn").click(function(){ slideTimer2(); next += 1; }); ``` 自己解決しました。 足したコードは$("#slide li:nth-child(+" + current + ")").fadeIn(duration); next += 1;です。 力技なので参考にはしない方がいいかもしれません。 一応全体のコードを書いた方がいいのかな?
kei344

2016/12/02 15:03

自己解決は回答欄にお願いします。
guest

0

自己解決

すみませんでした。全然teraratailにつながる様子がなく投稿が遅れました。
こちらの通信環境に異常があったのも原因だったかもしれません。
たびたびご迷惑おかけして申し訳ありません。フルのコードはこちらになります。
手前味噌なうえ、スマートなコードではありませんが、
if(current < 1){ ~}に
$("#slide li:nth-child(+" + current + ")").fadeIn(duration);を挿入して、
再度変数current=1をfadeInさせて
$("#prevBtn").click(function(){~});にnext += 1;
nextの変数に1を足したものを代入しました。
他におそらくスマートな回答があると思われますが、
今まで回答を得られていないようなので不器用な回答ですが、これをベストアンサーとさせていただきます。
どうもありがとうございました。
使い方が不慣れでも申し訳ありません。ご迷惑おかけします。

$(function(){ var count = $("#slide li").length; var current = 1; var next = 2; var interval = 270000; var duration = 1000; var timer; // 1番目の写真以外は非表示 $("#slide li:not(:first-child)").hide(); // 270000ミリ秒(変数intervalの値)ごとにslideTimer関数を実行 timer = setInterval(slideTimer, interval); // slideTimer関数 function slideTimer(){ $("#slide li:nth-child(+" + current + ")").fadeOut(duration); $("#slide li:nth-child(+" + next + ")").fadeIn(duration); current = next; next = ++next; if(next > count){ next = 1; } $("#button li a").removeClass("target"); $("#button li:nth-child("+ current +") a").addClass("target"); } function slideTimer2(){ $("#slide li:nth-child(+" + current + ")").fadeOut(duration); $("#slide li:nth-child(+" + --current + ")").fadeIn(duration); next = current; current = current; if(current < 1){ current = 26; $("#slide li:nth-child(+" + current + ")").fadeIn(duration); } $("#button li a").removeClass("target"); $("#button li:nth-child("+ current +") a").addClass("target"); } $("#button li a").click(function(){ next = $(this).html(); clearInterval(timer); timer = setInterval(slideTimer, interval); slideTimer(); return false; }); // 前へボタン $("#prevBtn").click(function(){ slideTimer2(); next += 1; }); // 次へボタン $("#nextBtn").click(function(){ slideTimer(); }); });

投稿2016/12/07 14:20

thed

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問