Diaporama ajouter et supprimer la classe pour changer l'image et l'image du bouton ne fonctionne pas

Question

Je veux faire un diaporama. son mon code: java script =>

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>

boutons était actif et changé après 5 secondes, mais l'image ne change pas active_slider = curseur actif current = bouton actif comment puis-je faire auto changer pour le slider je veux ajouter la classe pour active et supprimer la classe pour cacher si je ne peux pas avec la classe je peux actif avec style {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); 

J'Aded un attribut de position de données pour la boucle

Answer 2

Je pense que vous criez mettre la classe active à la "a" enveloppant le img.

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>