Question

我有4张图片，希望它们定期更改类（我有.active类，与悬停类似）。

.active,
.pic:hover{
    position: absolute;
    border: 1px solid black;
    transform: scale(1.1);
    transition: transform .2s;
}

基本上，我需要第一张图片来使该类处于活动状态，并在一段时间后对其进行更改，以便下一张图片具有该类，而第一张图片会丢失该类。这样的事情有可能吗？

HTML图片：

<div class="products">
    <a href="http://example.com/produkt1">
        <img class="pic" src="image.jpg" alt="image" width="75" height="75"> 
    </a>
</div>

和JS：

productIndex = 0;
slideshow();
function slideshow(){

    var i;
    var pic = document.getElementsByClassName("pic");

    for(i = 0; i < pic.length; i++){
        pic[i].className = pic[i].className.replace("active", "");
    }
    productIndex++;
    if(productIndex > pic.length){
        productIndex = 1;
    }
    pic[productIndex-1].className += active;

    setInterval(slideshow, 2000);
}

Answer 1

您可以使用setInterval定期运行将更改活动类的函数。这样的东西（伪代码）：

var imageArray = [];
var activeIndex = 0;

setInterval(function(){
    imageArray[activeIndex].removeClass('active');
    activeIndex++;
    activeIndex %= 4;
    imageArray[activeIndex].addClass('active');
}, 5000);

作为参数传递的数字值是再次运行该函数之前要等待的毫秒数。在此示例中，将在5秒之间更改类之间的时间。

setInterval Reference

Answer 2

这很丑陋，但它可能适用于超级基础……如果需要，您只需要使用图像更新div块即可。使用jquery ...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <style>
  div {
    width:50px;
    height:50px;
    background-color: black;
    margin-bottom:10px;
  }
  .active {
    background-color: red;
  }
  </style>
</head>
<body>
  <div id="pic1"></div>
  <div id="pic2"></div>
  <div id="pic3"></div>
  <div id="pic4"></div>
  <script>
  let lastActive = 0;
setInterval(()=>{
  $('div').removeClass('active');
  if(lastActive === 0){
    $('#pic1').addClass('active');
    lastActive = 1;
  }
  else if(lastActive === 1){
    $('#pic2').addClass('active');
    lastActive = 2;
  }
  else if(lastActive === 2){
    $('#pic3').addClass('active');
    lastActive = 3;
  }
  else if(lastActive === 3){
    $('#pic3').addClass('active');
    lastActive = 4;
  }
  else if(lastActive === 4){
    $('#pic1').addClass('active');
    lastActive = 1;
  }
}, 500)
  </script>
</body>
</html>

Answer 3

Matt L.在这里有一个要点。您的代码在幻灯片功能中包含setInterval，否则就可以了。

productIndex = 0;
slideshow();
function slideshow(){

    var i;
    var pic = document.getElementsByClassName("pic");

    for(i = 0; i < pic.length; i++){
        pic[i].className = pic[i].className.replace("active", "");
    }
    productIndex++;
    if(productIndex > pic.length){
        productIndex = 1;
    }
    pic[productIndex-1].className += active;
}

setInterval(slideshow, 2000);

可能可行。马特的答案要好得多，我想出了类似的方法，可以在jsfiddle上进行测试。

Answer 4

是的，有可能：

function carousel() {
  var images = document.querySelectorAll(".container img");
  for(var i = 0; i < images.length; i++) {
    if(images[i].classList.contains("active")) {
      images[i].classList.remove("active");
      if(i == images.length - 1) {
        images[0].classList.add("active");
      } else {
        images[i + 1].classList.add("active");
      }
      break;
    }
  }
}

setInterval(carousel,1000);

img {
  width:       100px;
  margin-left: 10px;
  transition:  .2s;
}

.active {
  transform: scale(1.1);
}

<div class="container">
  <img src="https://i.stack.imgur.com/cb20A.png" class="active"/>
  <img src="https://i.stack.imgur.com/cb20A.png"/>
  <img src="https://i.stack.imgur.com/cb20A.png"/>
  <img src="https://i.stack.imgur.com/cb20A.png"/>
</div>

然后您可以根据需要替换.active类。

Answer 5

检出此working example。我使用了setInterval和setTimeout的组合。

$(window).ready(()=>{
  // get all the images inside the image-container div
  let $images = $('.image-container').find('.image');
  let currImage = 0;
  // execute this code every 2 seconds
  window.setInterval(()=>{
    // add the active class to the current image
    $($images[currImage]).addClass('active');
    setTimeout(()=>{
      // execute the code here after 1.5 seconds
      // remove the active class from the previous image
      $($images[currImage-1]).removeClass('active');
    }, 1500);
    // make sure we don't go over the number of elements in the collection
    currImage = currImage >= $images.length ? 0 : currImage + 1;
  }, 2000);
});

.image.active {
  border: thin solid blue;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<div class="image-container" class="">
  <img src="https://via.placeholder.com/200x200" class="image active">
    <img src="https://via.placeholder.com/200x200" class="image">
    <img src="https://via.placeholder.com/200x200" class="image">
    <img src="https://via.placeholder.com/200x200" class="image">
</div>

请确保setTimeout中的代码将在下一个间隔之前执行。意思是，为setTimeout设置的时间总是小于setInterval的时间：）

Answer 6

例如，您可以这样做：

$(document).ready(function() {
  setInterval(function() {
    var active = $('.active');
    active.nextOrFirst().addClass('active');
    active.removeClass('active');
  }, 3000);
});

$.fn.nextOrFirst = function(selector)
{
  var next = this.next(selector);
  return (next.length) ? next : this.prevAll(selector).last();
};

.active,
.pic:hover{
    border: 1px solid black;
}
.pic {
    width: 150px;
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-container">
  <img class="pic active" src="https://via.placeholder.com/350x150">
  <img class="pic" src="https://via.placeholder.com/350x150">
  <img class="pic" src="https://via.placeholder.com/350x150">
  <img class="pic" src="https://via.placeholder.com/350x150">
</div>

编辑：这可以代替任何其他解决方案，而不是大多数其他解决方案。要仅在图片上使用它，只需通过功能中的选择器进行指定。

JavaScript-定期更改“有效”图片

6 个答案: