javascript - 如何使图像 slider 的元素符号在事件时看起来不同？

Question

我已经让 slider 工作了。如果你按下子弹，你会得到该位置的图像，如果你不按下任何子弹，一段时间后，图像无论如何都会改变。

所以现在我需要知道如何使当前事件的元素符号看起来与其他元素符号不同。如果你点击元素符号，我已经编码了。但我希望它在显示图像时有所不同。你用 java 来做吗？

这是我正在使用的代码:

Javascript:

var imageCount = 1;
var total = 6;

function photo(x) {
    var image = document.getElementById('img_slider');
    imageCount = x;
    image.src = "imagenes/img"+ imageCount +".png";
    clearInterval(time);
    time =  window.setInterval(function photoA() {      
    var image = document.getElementById('img_slider');
    imageCount = imageCount + 1;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 
    image.src = "imagenes/img"+ imageCount +".png";
    },18000);
}

var time = window.setInterval(function photoA() {    
    var image = document.getElementById('img_slider');
    imageCount = imageCount + 1;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 
    image.src = "imagenes/img"+ imageCount +".png";

    },18000);

CSS:

#slider {
    position:relative;
    overflow: hidden;
}

#img_slider {
    position:relative;
    height:100%;
    width:100%;
}

#slider .bulletswrapper {
    position: relative;
    display: table;
    margin: 0 auto;
    text-align: center;
    font-size: 0;
    z-index: 1;
}

#slider div.bulletswrapper div {
    border: none;
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: #CCCCCC;
    font-size: 0;
    margin: 2px 9px;
    cursor: pointer;
    border-radius: 11px;
    box-shadow: inset 0 1px 3px #666666;
}

#slider div.bulletswrapper div:hover {
    background-color: #e7e7e7;
    box-shadow: inset 0 1px 3px -1px #666666;
}

#slider div.bulletswrapper div:active{
    background-color: #1293dc;
    box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 1px rgba(0,0,0,.5);
}

HTML:

<div id="slider">
    <img src="imagenes/img1.png" id="img_slider" alt="slider">  
    <div class="bulletswrapper">
       <div id="1_b" onClick="photo(1)">1</div>
       <div id="2_b" onClick="photo(2)">2</div>
       <div id="3_b" onClick="photo(3)">3</div>
       <div id="4_b" onClick="photo(4)">4</div>
       <div id="5_b" onClick="photo(5)">5</div>
       <div id="6_b" onClick="photo(6)">6</div>
    </div>
</div>

Answer 1

我稍微清理了您的代码并添加了一个名为 ChangeActiveBullet 的新函数，它删除了先前的选择并更新了当前的选择。我还引入了一个名为 selectedBullet 的新变量，它会根据需要进行更新(通过 setInterval 或 onclick)。完整代码如下:

Javascript:

var imageCount = 1;
var total = 6;
var selectedBullet = 1;

function photo(x) {
  var image = document.getElementById('img_slider');

  ChangeActiveBullet(x);
  imageCount = x;

  image.src = "https://placehold.it/" + imageCount + "50x150/ff0000";
}

var time = window.setInterval(function photoA() {
  var image = document.getElementById('img_slider');

  imageCount = imageCount + 1;

  if (imageCount > total) {
    imageCount = 1;
    document.getElementById((total - 1) + '_b').classList.remove('active');
  }
  if (imageCount < 1) {
    imageCount = total;
  }
  image.src = image.src = "https://placehold.it/" + imageCount + "50x150/ff0000";
  ChangeActiveBullet(imageCount); 
}, 4000);

function ChangeActiveBullet(x) {
  //Use the selectedBullet variable to find the bullet to remove the "active" class from.
  var previousBullet = document.getElementById(selectedBullet + '_b');
  previousBullet.classList.remove('active');

  //Add the "active" class to the current selection.
  var activeBullet = document.getElementById(x + '_b');
  activeBullet.classList.add('active');

  selectedBullet = x;
}

CSS:

#slider div.bulletswrapper div.active {
  background-color: red;
}

下面的演示使用占位符图像，您显然可以在实现中更改它。

Fiddle Demo