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

Question

I already have the slider working. If you press the bullets you get the image in the position, and if you do not press any of the bullets, after some time, the images change anyway.

So now I need to know how to make the bullet that is currently active look different from the rest. I already coded that if you click on the bullet. But I want it to be different while the image is showing. Do you do that with java?

This is the code that I am using:

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

I cleaned up your code a little and added a new function called ChangeActiveBullet, which removes a previous selection and updates the current selection. I've also introduced a new variable called selectedBullet, which is updated as necessary (via setInterval or onclick). The complete code is below:

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

The demo below uses placeholder images, which you can obviously change in your implementation.

Fiddle Demo

Answer 2

You can change the active bullet's display inside your photo() and photoA() functions, by setting or clearing its style.

Something like this:

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