スライドショー画像の変更と削除のためのクラスの追加と削除

Question

メイクスライドショーが必要です。 その私のコード： ジャバスクリプト=>

setInterval(function() { 
 
    var activeLi = document.querySelector('li.current'); 
 
\t activeLi.classList.remove('current'); 
 
\t if (activeLi.nextElementSibling) { 
 
\t \t activeLi.nextElementSibling .classList.add('current'); 
 
\t } else { 
 
\t \t activeLi.parentElement.firstElementChild.classList.add('current') 
 
\t } 
 
\t var activeIMG = document.querySelector('.active_slider'); 
 
\t activeIMG.classList.remove('active_slider'); 
 
\t if (activeIMG.nextElementSibling) { 
 
\t \t activeIMG.nextElementSibling .classList.add('active_slider'); 
 
\t } else { 
 
\t \t activeIMG.parentElement.firstElementChild.classList.add('active_slider') 
 
\t } 
 
}, 5000);

.active_slider{ 
 
    display: inline; 
 
} 
 
.current{ 
 
    color: red; 
 
}

<div id="slider" class="dk-box mrg-bottom"> 
 
    <div id="dk-slider-div" class="slides center"> 
 
     <a class="clickCount" elementtype="1" categorytitle=""> 
 
      <img src="/f15468d9.jpg" class="slideItem active_slider"> 
 
     </a> 
 
     <a class="clickCount" elementtype="1" categorytitle=""> 
 
      <img src="/f15468d9.jpg" class="slideItem"> 
 
     </a> 
 
     <a class="clickCount" elementtype="1" categorytitle=""> 
 
      <img src="/f15468d9.jpg" class="slideItem"> 
 
     </a> 
 
     <footer> 
 
      <ul class="tabs"> 
 
       <li class="tabItem current"> 
 
        <a> 
 
         Slide 1 
 
        </a> 
 
       </li> 
 
       <li class="tabItem"> 
 
        <a> 
 
         Slide 2 
 
        </a> 
 
       </li> 
 
       <li class="tabItem"> 
 
        <a> 
 
         Slide 3 
 
        </a> 
 
       </li> 
 
      </ul> 
 
     </footer> 
 
    </div> 
 
</div>

ボタンがアクティブであったと5秒後に変更が、画像は active_slider =アクティブスライダは current =アクティブボタン がどのように私は、オートを作ることができます変更されません。スライダーを変更する 私は、アクティブなクラスを追加し、hideクラスのクラスを追加したい。クラスiのcantがスタイルでアクティブにできる場合は、{display：inline; }

Answer 1

 <a class="clickCount active_slider" elementtype="1" data-position="0" categorytitle=""> 
      <img src="/f15468d9.jpg" class="slideItem"> 
     </a> 
     <a class="clickCount" elementtype="1" categorytitle="" data-position="1"> 
      <img src="/f15468d9.jpg" class="slideItem"> 
     </a> 
     <a class="clickCount" elementtype="1" categorytitle="" data-position="2"> 
      <img src="/f15468d9.jpg" class="slideItem"> 
     </a> 

    var position = 0; 
setInterval(function() { 
     var activeLi = document.querySelector('li.current'); 
     activeLi.classList.remove('current'); 
     if (activeLi.nextElementSibling) { 
      activeLi.nextElementSibling .classList.add('current'); 
     } else { 
      activeLi.parentElement.firstElementChild.classList.add('current') 
     } 

     position++; 
     if (position == 3){ 
      position = 0; 
     } 
     $('.clickCount').each(function(){ 
      if($(this).attr("data-position") == position){ 
      $(this).addClass('active_slider'); 
      }else{ 
      $(this).removeClass('active_slider'); 
      } 
     }); }, 1000); 

私はループ

Answer 2

私はアクティブなクラスをimgをラップする "a"に置きかけると叫ぶと思います。

Answer 3

setInterval(function() { 
 
    ChangePos(true); 
 
    }, 6000); 
 
    position = 0; 
 
    function ChangePos(Next){ 
 
    var activeLi = document.querySelector('li.current'); 
 
    activeLi.classList.remove('current'); 
 
    if (activeLi.nextElementSibling) { 
 
    activeLi.nextElementSibling .classList.add('current'); 
 
    } else { 
 
    activeLi.parentElement.firstElementChild.classList.add('current') 
 
    } 
 

 
changePosData(Next); 
 
    $('.clickCount').each(function(){ 
 
    if($(this).attr("data-position") == position){ 
 
     $(this).addClass('active_slider'); 
 
    }else{ 
 
     $(this).removeClass('active_slider'); 
 
    } 
 
    }); 
 

 

 
function changePosData(Next){ 
 
    if(Next == true){ 
 
     console.log('forrward'); 
 
     position++; 
 
     if (position == 3){ 
 
     position = 0; 
 
     } 
 
    }else{ 
 
     console.log('back'); 
 
     if (position == 0){ 
 
     position = 3; 
 
     } 
 
      position--; 
 
    } 
 
    } 
 

 
} 
 
$('.btnC2').on('click', function(){ 
 
ChangePos(true); // for the next BTN 
 
    }); 
 
$('.btnC').on('click', function(){ 
 
ChangePos(false); // for the prev BTN 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<div id="slider" class="dk-box mrg-bottom"> 
 
     <div id="dk-slider-div" class="slides center"> 
 
      <!-- <section> --> 
 
      <a class="clickCount active_slider" elementtype="1" data-position="0" categorytitle=""> 
 
       <img src="/f15468d9.jpg" class="slideItem"> 
 
      </a> 
 
      <a class="clickCount" elementtype="1" categorytitle="" data-position="1"> 
 
       <img src="/f15468d9.jpg" class="slideItem"> 
 
      </a> 
 
      <a class="clickCount" elementtype="1" categorytitle="" data-position="2"> 
 
       <img src="/f15468d9.jpg" class="slideItem"> 
 
      </a> 
 
      <!-- </section> --> 
 
      <button type="button" class="btnC" name="button"> ASD</button> 
 
      <button type="button" class="btnC2" name="button"> ASD</button> 
 
      <footer> 
 
       <ul class="tabs"> 
 
        <li class="tabItem current"> 
 
         <a> 
 
          Slide 1 
 
         </a> 
 
        </li> 
 
        <li class="tabItem"> 
 
         <a> 
 
          Slide 2 
 
         </a> 
 
        </li> 
 
        <li class="tabItem"> 
 
         <a> 
 
          Slide 3 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </footer> 
 
     </div> 
 
    </div>