Slider with bullets

Question

I have made a slider of three photos. I have two buttons (next and prev), this part works fine. I want to use 3 bullets for selecting the images too, but I am having some problems making the bullet buttons work with the slider. I can't find the way to do this.

Can anyone help me with this code? I'm a real beginner with JavaScript.

Thanks.

 /** * Navegación por botones */ var navegar = function () { var elemento = document.getElementById('slider').getElementsByTagName('li'); var pos = 0; for (var i=0; i<elemento.length; i++) { if (elemento[i].className == "activa") { elemento[i].className = "noactiva"; pos = i; } } /** Pulsar Anterior **/ if (this.id == "ant" && pos > 0) { elemento[pos-1].className = "activa"; } else if (this.id == "ant") { elemento[elemento.length-1].className = "activa"; } /** Pulsar Siguiente **/ if (this.id == "seg" && pos < elemento.length-1) { elemento[pos+1].className = "activa"; } else if (this.id == "seg") { elemento[0].className = "activa"; } return false; }; var desplazar = function () { var nav = document.querySelectorAll(".nav"); for (var i=0; i<nav.length; i++) { nav[i].onclick = navegar; } }; window.onload = function (){ new desplazar(); };

 body.slide { background-color:#9c9c9c } #slider {display: block; margin: 0 auto;padding: 0;position: relative;width: 50%;min-height: 22.5em; max-height: 22.5em;list-style: none; overflow: hidden;} #slider li {position: absolute; background: white; float: left; margin: 0 15px 30px; padding: 10px 10px 35px; box-shadow: 0 4px 6px rgba(0,0,0,.3);} #slider li img { width: 100%;} #slider .activa { z-index: 1; opacity: 1;} #slider .noactiva { z-index: 0; opacity: 0;} .nav { display: inline-block; margin-top: 1.5em; text-decoration: none;} .botons { text-align: center;} .button { position: absolute; top: 50%; } #linknum ul{list-style:none; display:block; text-align:center; } #linknum ul li{display:inline; margin-right: 3%;}

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta charset="UTF-8"> <title>PracticaFinal</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="slide.js"></script> </head> <ul id="navTop"> <li><a href="index.html">Home</a></li> <li><a href="slide.html">Slide</a></li> <li><a href="carta.html">Carta</a></li> </ul> <body class="slide"> <div id="slide"> <h1>Galeria d'imatges amb Slide</h1> <ul id="slider"> <li class="activa"><img src="images/imatge1.jpg" alt="img1" /></li> <li class="noactiva"><img src="images/imatge2.jpg" alt="img2" /></li> <li class="noactiva"><img src="images/imatge3.jpg" alt="img3" /></li> </ul> <div class="botons"> <button id="ant" class="nav" >Anterior</button> <button id="seg" class="nav" >Següent</button> <input id="button-1" type="radio" name="radio-set" class="activa" checked="checked"> <label for="button-1" class="button-label-1"></label> <input id="button-2" type="radio" name="radio-set" class="noactiva"> <label for="button-2" class="button-label-2"></label> <input id="button-3" type="radio" name="radio-set" class="noactiva"> <label for="button-3" class="button-label-3"></label> </div> </div> </div> </body>

Answer 1

I think you will find your applications easier to think about if you separate the application state from the representation . By "application state", we mean the data in the application that changes over time. In this example, the application state has a single property: the currently active slide index.

In order for our code to know the current application state, it must use the DOM to figure out the index of the slide that is currently active. We can move the state to our code-level by creating a global variable to hold the active slide index:

var activeIndex = 0;

And while we are creating global variables, let's cache some references to the DOM elements we will be continually using so that we do not have to keep fetching and re-fetching them:

var $bullets = document.querySelectorAll('input[name="radio-set"]');
var $slides = document.getElementById('slider').getElementsByTagName('li');

Next, let's update our navegar function to use our activeIndex variable:

var navegar = function () {  
    activeIndex += this.id === 'seg' ? 1 : -1;

    if (activeIndex >= $slides.length) {
        activeIndex = 0;
    }
    else if (activeIndex < 0) {
        activeIndex = $slides.length - 1;
    }

    render(); // TODO: We will define this later.
}

We will now define our render function whose job it will to update the page with the current application state:

var render = function () {
    for (var i = 0; i < $slides.length; i++) {
        $bullets[i].className = i === activeIndex ? 'activa' : 'noactiva';
        $slides[i].className = i === activeIndex ? 'activa' : 'noactiva';
    }
};

We are now ready to address your original question and to bind the radio buttons to our slider navigation. All we need do is attach an onchange handler to each bullet that will update the ativeIndex and then call render . We can do this by adding something like the following to the desplazar function:

for (var i = 0; i < $bullets.length; i++) {
    (function (index) {
        $bullets[index].onchange = function () {
            activeIndex = index;
            render();
        };
    })(i);
}

The (function (index) { /*...*/ })(i); bit might look a little odd. If you are curious about it, a discussion can be found here .

Additionally, I have created a fiddle for your reference.

Slider with bullets

Question

1 answers

solution1
1 2017-12-23 19:17:50

Slider with bullets

Question

1 answers

solution1 1 2017-12-23 19:17:50

solution1
1 2017-12-23 19:17:50