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

###発生している問題・エラーメッセージ
書き換え途中までは問題なくJavaScriptでも正常に動作するのですが、
5秒おきに設定している自動スライドの処理をjQueryからJavaScriptに書き換えると

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

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

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

html
1  <div id="slideGallery">
2    <ul id="slide">
3      <li><a href="#"><img src="./images/photo01.jpg" alt=""></a></li>
4      <li><a href="#"><img src="./images/photo02.jpg" alt=""></a></li>
5      <li><a href="#"><img src="./images/photo03.jpg" alt=""></a></li>
6      <li><a href="#"><img src="./images/photo04.jpg" alt=""></a></li>
7    </ul>
8    <div id="nav">
9      <img src="./images/nav_prev.png" class="prev">
10      <img src="./images/nav_next.png" class="next">
11    </div>
12    <ul id="paging"></ul>
13  </div>
14</div>

css
1*{
2  list-style-type:none;
3  margin:0;
4  padding:0;
5}
6#container{
7  width:650px;
8  margin:100px auto;
9}
10#slideGallery{
11  width:650px;
12  position: relative;
13  overflow:hidden;
14}
15#slide{
16  width:10000px;
17}
18#slide li{
19  float:left;
20}
21#paging{
22  text-align: center;
23  position: absolute;
24  width:100%;
25  bottom:10px;
26}
27#paging li{
28  display: inline-block;
29  *display: inline;
30  *zoom:1;
31  width:20px;
32  height:20px;
33  background: url(./images/page.png);
34}
35#paging li.active{
36  background: url(./images/page_active.png);
37}
38#nav {
39  display: none;
40}
41#nav .prev{
42  position: absolute;
43  left:10px;
44  top:50%;
45  margin-top:-50px;
46}
47#nav .next{
48  position: absolute;
49  right:10px;
50  top:50%;
51  margin-top:-50px;
52}

js
1書き換え前のjQueryのコード
2
3// ページングの設定
4$('#slide li').each(function() {
5  $('#paging').append($('<li></li>').attr('data-img', $('img', this).attr('src')));
6});
7$('#paging li:first-child').addClass('active');
8
9// 自動スライドの設定
10var timerId = setInterval(function() {
11  $('#nav .next').click();
12}, 5000);
13
14// 自動スライドの制御
15$('#slideGallery').hover(function() {
16  $('#nav').show();
17  clearInterval(timerId);
18}, function() {
19  $('#nav').hide();
20  timerId = setInterval(function() {
21    $('#nav .next').click();
22  }, 5000);
23});
24
25// 右矢印ボタンが押された際の挙動
26$('#nav .next').click(function() {
27  $('#slide:not(:animated)').animate({
28    marginLeft: -1 * $('#slide li').width()
29  }, function() {
30    $('#slide').css('margin-left', '0');
31    $('#slide').append($('#slide li:first-child'));
32    $('#paging li.active').removeClass('active');
33    $('#paging li[data-img="' + $('#slide li:first-child img').attr('src') + '"]').addClass('active');
34  });
35});
36
37// 左矢印ボタンが押された際の挙動
38$('#nav .prev').click(function() {
39  $('#slide:not(:animated)')
40    .css('margin-left', -1 * $('#slide li').width())
41    .prepend($('#slide li:last-child'))
42    .animate({
43      marginLeft: 0
44    }, function() {
45      $('#paging li.active').removeClass('active');
46      $('#paging li[data-img="' + $('#slide li:first-child img').attr('src') + '"]').addClass('active');
47  });
48});

js
1書き換えたJavaScriptのコード
2
3// ページングの設定
4document.querySelectorAll('#slide li').forEach(function(value) {
5  var li = document.createElement('li');
6  li.setAttribute('data-img', value.querySelector('img').getAttribute('src'));
7  document.getElementById('paging').appendChild(li);
8});
9document.querySelector('#paging').firstElementChild.classList.add('active');
10
11// 自動スライドの設定
12var timerId = setInterval(function() { slideNext(); }, 5000);
13
14// 自動スライドの制御
15document.getElementById('slideGallery').addEventListener('mouseover', function(event) {
16  document.getElementById('nav').style.display = 'block';
17  clearInterval(timerId);
18
19  event.stopPropagation();
20}, false);
21document.getElementById('slideGallery').addEventListener('mouseout', function(event) {
22  document.getElementById('nav').style.display = 'none';
23  timerId = setInterval(function() { slideNext(); }, 5000);
24
25  event.stopPropagation();
26}, false);
27
28// 右矢印ボタンが押された際の挙動
29slideNext();
30/**
31 * スライド進む
32 */
33function slideNext() {
34  document.querySelector('#nav .next').addEventListener('click', function() {
35    // TODO: スライドアニメーションを追加...
36    var slide = document.getElementById('slide');
37    slide.appendChild(slide.firstElementChild);
38    document.querySelector('#paging li.active').classList.remove('active');
39    document.querySelector('#paging li[data-img="' + slide.firstElementChild.querySelector('img').getAttribute('src') + '"]').classList.add('active');
40  }, false);
41}
42
43// 左矢印ボタンが押された際の挙動
44document.querySelector('#nav .prev').addEventListener('click', function() {
45  // TODO: スライドアニメーションを追加...
46  var slide = document.getElementById('slide');
47  slide.insertBefore(slide.lastElementChild, slide.firstElementChild);
48  document.querySelector('#paging li.active').classList.remove('active');
49    document.querySelector('#paging li[data-img="' + slide.firstElementChild.querySelector('img').getAttribute('src') + '"]').classList.add('active');
50}, false);

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

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

Lhankor_Mhy

2017/09/27 09:37

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

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1function slideNext() {
2  document.querySelector('#nav .next').addEventListener('click', function() {
3    // TODO: スライドアニメーションを追加...
4    var slide = document.getElementById('slide');
5    slide.appendChild(slide.firstElementChild);
6    document.querySelector('#paging li.active').classList.remove('active');
7    document.querySelector('#paging li[data-img="' + slide.firstElementChild.querySelector('img').getAttribute('src') + '"]').classList.add('active');
8  }, false);
9}

↑ここがおかしいですね。
setIntervalで呼ばれていますが、そのたびにイベントリスナが増えます。50秒待てば、1回クリックするたびに10回クリックしたことになるかと。
slideNext関数は普通に定義して、イベントで呼べばいいかと思います。

投稿2017/09/27 09:48

Lhankor_Mhy

総合スコア36074

okame

2017/09/27 21:50

回答ありがとうございます！試してみます。

okame

2017/09/27 21:56

正常に動作するようになりました！感謝感謝です☆

行動規範の内容に同意します

sampleがうまく動かせなくてちょっと仕様でわからないところがあるので
以下適当に書いてみました

仕様

.prevを押すと#slideの末尾のliが先頭にくる
.nextを押すと#slideの先頭のliが末尾にくる
#slideGalleryにmouseoverすると1秒置きに.nextを押す
#slideGalleryにmouseoutすると.nextを押すのをやめる

javascript
1var timerId;
2document.addEventListener('click',function(e){
3  var t=e.target;
4  var firstLi=document.querySelector("#slide li:first-child");
5  var lastLi=document.querySelector("#slide li:last-child");
6  if(t.nodeName=="IMG"){
7    if(t.classList.contains("prev")){
8      lastLi.parentNode.insertBefore(lastLi.cloneNode(true),firstLi);
9      lastLi.parentNode.removeChild(lastLi);
10    }else if(t.classList.contains("next")){
11      firstLi.parentNode.appendChild(firstLi.cloneNode(true));
12      firstLi.parentNode.removeChild(firstLi);
13    }
14  }
15});
16window.onload=function(){
17document.querySelector('#slideGallery').addEventListener('mouseover',function(e){
18  timerId = setInterval(function() {
19    document.querySelector('#nav .next').click();
20  }, 1000);
21});
22document.querySelector('#slideGallery').addEventListener('mouseout',function(e){
23   clearInterval(timerId);
24});
25}

HTML
1<div>
2<div id="slideGallery">
3<ul id="slide">
4<li><a href="#"><img src="1.jpg" alt="1"></a></li>
5<li><a href="#"><img src="2.jpg" alt="2"></a></li>
6<li><a href="#"><img src="3.jpg" alt="3"></a></li>
7<li><a href="#"><img src="4.jpg" alt="4"></a></li>
8</ul>
9</div>
10<div id="nav">
11<img src="prev.png" class="prev" alt="prev">
12<img src="next.png" class="next" alt="next">
13</div>
14<ul id="paging"></ul>
15</div>