Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

按钮处于活动状态，并在5秒后更改，但图像无法更改 active_slider =有效滑块 current =有效按钮如何为滑块进行自动更改我想为活动添加类，并为隐藏删除类如果不能使用类i，则可以使用样式{display：inline; }

Answer 1

尝试这样的事情，它将每3秒运行一次，并将类激活为下一个元素。

setInterval(function(){ 
  var slider = $(".slider");
  var active = slider.find(".active");
  var sliderCount = slider.find("li").length;
  var index = active.index();
  
  active.removeClass("active");
  
  if (index < sliderCount - 1){
    active.next().addClass("active")
  } else {
    slider.find("li:first").addClass("active")
  }
  
}, 3000);

.active{
  color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
    <li class="slide1">
        <img src"image.png" alt="1">
    </li>
    <li class="slide2 active">
        <img src"image.png" alt="2">
    </li>
    <li class="slide3">
        <img src"image.png" alt="3">
    </li>
</div>

Answer 2

您的HTML无效，=后遗失class，应为class="slide1 active"。要在一段时间后调用函数，您可以使用setInterval() adn修改类，您可以修改classList 属性：

var x = 1000;

setInterval(function () {
  var activeLi = document.querySelector('li.active');
  activeLi.classList.remove('active');
  if (activeLi.nextElementSibling ) {
    activeLi.nextElementSibling .classList.add('active');
  } else {
    activeLi.parentElement.firstElementChild.classList.add('active')
  }
}, x);

.active {
  color:red
}

<div class="slider">
    <li class="slide1 active">
        <img src"image.png">
    </li>
    <li class="slide2">
        <img src"image.png">
    </li>
    <li class="slide3">
        <img src"image.png">
    </li>
</div>

在每个时间间隔，它从元素中删除类active并检查元素是否具有兄弟元素（通过检查nextElementSibling存在）。根据它，active类附加到兄弟或第一个元素（parentElement.firstElementChild）。

幻灯片放映添加和删除更改图像和按钮的类

2 个答案: