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

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

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

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

jQuery

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

解決済

jQuery→JavaScriptに書き換えたスライドギャラリーを正常に動作させたい

okame
okame

総合スコア0

JavaScript

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

jQuery

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

2回答

0評価

0クリップ

15閲覧

投稿2017/09/27 07:27

編集2022/01/12 10:58

###前提・実現したいこと
タイトルの通りです。

###発生している問題・エラーメッセージ
5秒おきに設定している自動スライドの処理をjQueryからJavaScriptに書き換えると

  • 自動スライドが効かなくなる
  • スライド進むボタンも挙動がおかしくなる

という事象です。コンソール等にエラーメッセージは特に表示されていません。

###該当のソースコード

html

<div id="slideGallery"> <ul id="slide"> <li><a href="#"><img src="./images/photo01.jpg" alt=""></a></li> <li><a href="#"><img src="./images/photo02.jpg" alt=""></a></li> <li><a href="#"><img src="./images/photo03.jpg" alt=""></a></li> <li><a href="#"><img src="./images/photo04.jpg" alt=""></a></li> </ul> <div id="nav"> <img src="./images/nav_prev.png" class="prev"> <img src="./images/nav_next.png" class="next"> </div> <ul id="paging"></ul> </div> </div>

css

*{ list-style-type:none; margin:0; padding:0; } #container{ width:650px; margin:100px auto; } #slideGallery{ width:650px; position: relative; overflow:hidden; } #slide{ width:10000px; } #slide li{ float:left; } #paging{ text-align: center; position: absolute; width:100%; bottom:10px; } #paging li{ display: inline-block; *display: inline; *zoom:1; width:20px; height:20px; background: url(./images/page.png); } #paging li.active{ background: url(./images/page_active.png); } #nav { display: none; } #nav .prev{ position: absolute; left:10px; top:50%; margin-top:-50px; } #nav .next{ position: absolute; right:10px; top:50%; margin-top:-50px; }

photo01.jpg
photo02.jpg
photo03.jpg
photo04.jpg
nav_prev.jpg
nav_next.png
page_active.png
page.png

js

書き換え前のjQueryのコード // ページングの設定 $('#slide li').each(function() { $('#paging').append($('<li></li>').attr('data-img', $('img', this).attr('src'))); }); $('#paging li:first-child').addClass('active'); // 自動スライドの設定 var timerId = setInterval(function() { $('#nav .next').click(); }, 5000); // 自動スライドの制御 $('#slideGallery').hover(function() { $('#nav').show(); clearInterval(timerId); }, function() { $('#nav').hide(); timerId = setInterval(function() { $('#nav .next').click(); }, 5000); }); // 右矢印ボタンが押された際の挙動 $('#nav .next').click(function() { $('#slide:not(:animated)').animate({ marginLeft: -1 * $('#slide li').width() }, function() { $('#slide').css('margin-left', '0'); $('#slide').append($('#slide li:first-child')); $('#paging li.active').removeClass('active'); $('#paging li[data-img="' + $('#slide li:first-child img').attr('src') + '"]').addClass('active'); }); }); // 左矢印ボタンが押された際の挙動 $('#nav .prev').click(function() { $('#slide:not(:animated)') .css('margin-left', -1 * $('#slide li').width()) .prepend($('#slide li:last-child')) .animate({ marginLeft: 0 }, function() { $('#paging li.active').removeClass('active'); $('#paging li[data-img="' + $('#slide li:first-child img').attr('src') + '"]').addClass('active'); }); });

js

書き換えたJavaScriptのコード // ページングの設定 document.querySelectorAll('#slide li').forEach(function(value) { var li = document.createElement('li'); li.setAttribute('data-img', value.querySelector('img').getAttribute('src')); document.getElementById('paging').appendChild(li); }); document.querySelector('#paging').firstElementChild.classList.add('active'); // 自動スライドの設定 var timerId = setInterval(function() { slideNext(); }, 5000); // 自動スライドの制御 document.getElementById('slideGallery').addEventListener('mouseover', function(event) { document.getElementById('nav').style.display = 'block'; clearInterval(timerId); event.stopPropagation(); }, false); document.getElementById('slideGallery').addEventListener('mouseout', function(event) { document.getElementById('nav').style.display = 'none'; timerId = setInterval(function() { slideNext(); }, 5000); event.stopPropagation(); }, false); // 右矢印ボタンが押された際の挙動 slideNext(); /** * スライド進む */ function slideNext() { document.querySelector('#nav .next').addEventListener('click', function() { // TODO: スライドアニメーションを追加... var slide = document.getElementById('slide'); slide.appendChild(slide.firstElementChild); document.querySelector('#paging li.active').classList.remove('active'); document.querySelector('#paging li[data-img="' + slide.firstElementChild.querySelector('img').getAttribute('src') + '"]').classList.add('active'); }, false); } // 左矢印ボタンが押された際の挙動 document.querySelector('#nav .prev').addEventListener('click', function() { // TODO: スライドアニメーションを追加... var slide = document.getElementById('slide'); slide.insertBefore(slide.lastElementChild, slide.firstElementChild); document.querySelector('#paging li.active').classList.remove('active'); document.querySelector('#paging li[data-img="' + slide.firstElementChild.querySelector('img').getAttribute('src') + '"]').classList.add('active'); }, false);

###テスト環境
https://jsbin.com/fesaneg/edit?html,js,output
※画像リンク貼れないので意味ないとは思いますが...。

以上です。
皆様のお知恵を拝借できれば幸いです。宜しくお願い致します。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy
Lhankor_Mhy

2017/09/27 09:37

『挙動がおかしくなる 』とは具体的には何が起こりますか?

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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

jQuery

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