如何使图像滑块的项目符号在活动时看起来不同？

Question

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

所以现在我需要知道如何使当前激活的项目符号看起来与其他项目符号不同。如果你点击项目符号，我已经编码了。但我希望它在显示图像时有所不同。你用 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

您可以通过设置或清除其样式来更改 photo() 和 photoA() 函数中活动项目符号的显示。

像这样：

// clear and set bullet styles
for( i = 1; i <= total; i++ ) {
    var bullet = document.getElementById( i+'_b');
    bullet.style.backgroundColor = (i===x ? 'white' : '');
}

sample jsfiddle

Answer 2

我稍微清理了您的代码并添加了一个名为 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

如何使图像滑块的项目符号在活动时看起来不同？

How to make a bullet of an image slider look different while is active?

html

javascript

css

image

slider