幻灯片放映添加和删除 class 以更改图像和按钮图像不起作用

Question

我想制作幻灯片。它是我的代码： java 脚本 =>

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')
 }
 var activeIMG = document.querySelector('.active_slider');
 activeIMG.classList.remove('active_slider');
 if (activeIMG.nextElementSibling ) {
  activeIMG.nextElementSibling .classList.add('active_slider');
 } else {
  activeIMG.parentElement.firstElementChild.classList.add('active_slider')
 }
}, 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 = 活动按钮我怎样才能自动更改滑块我想为活动添加 class 并为隐藏删除 class 如果不能使用 class 我可以使用 style { display: inline; }

Answer 1

我想你喊把活动 class 放到 "a" 包装 img。

Answer 2

        <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 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>

幻灯片放映添加和删除 class 以更改图像和按钮图像不起作用

Slide show add and remove class for change image and button image not work

javascript

jquery

slider

slideshow