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

Question

我想制作幻灯片。 我的代码： java script =＆gt;

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 =有效按钮 如何为滑块进行自动更改 我想为活动添加类，并为隐藏删除类 如果不能使用类i，则可以使用样式{display：inline; }

Answer 1

我认为你大喊将活动类放到包含img的“a”中。

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>