Create playlist control flow for web player

Question

Create playlist control flow for web player

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

To illustrate what I'm looking for, look at the figure:

Screen Shot

ForthisIputthesourcecodeforexample:

Code

<html><head><styletype="text/css">
#slide #screenshot {
width: 480px;
height: 360px;
border: solid 3px #333;
}

#slide a {
border: solid 1px #333;
background-color: #F7F7F7;
padding: 5px;
text-decoration: none;
color: #000;
}

#slide a:hover {
border: solid 1px #333;
text-decoration: underline;
background-color: #333;
color: #FFF;
}

#slide a.hover {
background-color: #333;
color: #FFF;
}

#slide #controle {
width: 480px;
height: 360px;
text-align: center;
padding-top: 15px;
}
</style>

</head>

<body>

<div id="slide">

<div id="screenshot">

<img src="screenshot/1.jpg" width="480px" height="360px" border="0" alt="Banner">

</div>

<div id="controle">

<a href="#" onclick="troca(1);"> &#171 Anterior </a>&nbsp;&nbsp;

<a href="javascript:void(0);" id="screenshot1" class="hover" onclick="troca('0');">1</a>
<a href="javascript:void(0);" id="screenshot2" onclick="troca('1');">2</a>
<a href="javascript:void(0);" id="screenshot3" onclick="troca('2');">3</a>
<a href="javascript:void(0);" id="screenshot4" onclick="troca('3');">4</a>

&nbsp;&nbsp;<a href="#" onclick="troca(-1);"> Próximo &#187 </a>

</div>

</div>

</body>

<script>
img = ['1', '2', '3', '4']

indice = 0;

function troca(i) {

    if (i == 0 || i == 1 || i == 2 || i == 3) {

        indice = i;

    } else {

        if (indice == img.length - 1) {

            indice = 0;

        } else {

            indice++;

        }

    }
    document.getElementById("screenshot1").setAttribute("class", "");
    document.getElementById("screenshot2").setAttribute("class", "");
    document.getElementById("screenshot3").setAttribute("class", "");
    document.getElementById("screenshot4").setAttribute("class", "");
    document.getElementById("screenshot" + img[indice]).setAttribute("class", "hover");

    document.getElementById("screenshot").innerHTML = "<img src='screenshot/" + img[indice] + ".jpg' width='480' height='360' border='0' alt='snap shot'>";
}
</script>

<html>

I did not set thumbnail on the following links:

<a href="javascript:void(0);" id="screenshot1" class="hover" onclick="troca('0');">1</a>
<a href="javascript:void(0);" id="screenshot2" onclick="troca('1');">2</a>
<a href="javascript:void(0);" id="screenshot3" onclick="troca('2');">3</a>
<a href="javascript:void(0);" id="screenshot4" onclick="troca('3');">4</a>

I preferred to leave it by numbers to detect any errors , since it is in the creation phase.

I know the problem is here.

if (indice == img.length - 1) {

indice = 0;

} else {

indice++;

}

javascript html

asked by anonymous 28.12.2016 / 21:05

2 answers

2

Change your function troca to this one that should work. Try adding a JSFiddle that will help a lot.

img = ['1','2','3','4']

indice = 0;

function resetThumbnail () {
	document.getElementById("screenshot1").className = "";
    document.getElementById("screenshot2").className = "";
    document.getElementById("screenshot3").className = "";
    document.getElementById("screenshot4").className = "";
    document.getElementById("screenshot" + img[indice]).className = "hover";
}

function troca(i) {
    indice += i;

    resetThumbnail();

    this.className = 'hover';

    // edit - adicionando um limitador.
    if (indice < 0) {
        indice = 0;
    } else if (indice > img.length - 1) {
        indice = img.length - 1;
    }

    document.getElementById("screenshot").innerHTML = "<img src='screenshot/" + img[indice] + ".jpg' width='480' height='360' border='0' alt='snap shot'>";
}

#slide #screenshot {
width: 480px;
height: 360px;
border: solid 3px #333;
}

#slide a {
border: solid 1px #333;
background-color: #F7F7F7;
padding: 5px;
text-decoration: none;
color: #000;
}

#slide a:hover {
border: solid 1px #333;
text-decoration: underline;
background-color: #333;
color: #FFF;
}

#slide a.hover {
background-color: #333;
color: #FFF;
}

#slide #controle {
width: 480px;
height: 360px;
text-align: center;
padding-top: 15px;
}

<div id="slide">

<div id="screenshot">

<img src="screenshot/1.jpg" width="480px" height="360px" border="0">
    
</div>

<div id="controle">

<a href="#" onclick="troca(-1);"> &#171 Anterior </a>&nbsp;&nbsp;

<a href="javascript:void(0);" id="screenshot1" class="hover" onclick="troca('0');">1</a>
<a href="javascript:void(0);" id="screenshot2" onclick="troca('1');">2</a>
<a href="javascript:void(0);" id="screenshot3" onclick="troca('2');">3</a>
<a href="javascript:void(0);" id="screenshot4" onclick="troca('3');">4</a>

&nbsp;&nbsp;<a href="#" onclick="troca(1);"> Próximo &#187 </a>

</div>

</div>

I did not understand the purpose of the rest of your function.

28.12.2016 / 23:42

Increasing decimal count in nodejs Error using string of values

score 2 · Accepted Answer

I think the code should look like this:

var img = ['1','2','3','4'];

var indice = 0;

function troca(i) {
    //Verifica se o numero esta dentro da quantidade de indices
    if (i < img.length) {
       indice = i;
    } else {
       return;
    }

    document.getElementById("screenshot1").className = "";
    document.getElementById("screenshot2").className = "";
    document.getElementById("screenshot3").className = "";
    document.getElementById("screenshot4").className = "";
    document.getElementById("screenshot" + img[indice]).className = "hover";

    document.getElementById("screenshot").innerHTML = "<img src='screenshot/" + img[indice] + ".jpg' width='480' height='360' border='0' alt='screenshot/" + img[indice] + ".jpg'>";
}

function proximo() {
    //Soma mais 1 e se passar do limite do indice torna 0 novamente
    indice++;

    if (indice >= img.length) {
       indice = 0;
    }

    troca(indice);
}

function anterior() {
    //Subtrai 1, se for menor que 0 move para o ultimo item do indice
    indice--;

    if (indice < 0) {
       indice = img.length - 1;
    }

    troca(indice);
}

.hover {
    padding: 5px;
    background-color: #F00;
    color: #fff;
}

<div id="screenshot">

<img src="screenshot/1.jpg" width="480px" height="360px" border="0" alt="1">

</div>

<a href="#" onclick="anterior();"> &#171 Anterior </a>&nbsp;&nbsp;

<a href="javascript:void(0);" id="screenshot1" class="hover" onclick="troca('0');">1</a>
<a href="javascript:void(0);" id="screenshot2" onclick="troca('1');">2</a>
<a href="javascript:void(0);" id="screenshot3" onclick="troca('2');">3</a>
<a href="javascript:void(0);" id="screenshot4" onclick="troca('3');">4</a>

&nbsp;&nbsp;<a href="#" onclick="proximo();">Próximo &#187</a>