Create control flow in playlist for web player

Asked

Viewed 92 times

1

To illustrate what I’m looking for, note the figure:


Screen Shot

For this I put the source code for example:


Code

<html>

<head>

<style type="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 didn’t define thumbnail at 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 by numbers to detect possible mistakes, since it is being created.

My difficulty is in making logical flow control between "next/previous"

I know the problem is here..

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

indice = 0;

} else {

indice++;

}
javascript html

  • See if this helps http://answall.com/a/168525/3635 (BS: I wasn’t the one who was negative and I didn’t understand why)

  • I don’t get it, it’s video or photo?

  • This is clear, but people (probably) are hoping to try to understand if you want to play a video, photo or other thing to create an example upon the usage you need.

  • See if the answer helps you

2 answers

2

Changes its function troca this one 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 don’t understand the purpose of the rest of your job.

  • troca(-1); will change the <img> for the previous index, troca(1); next time.

  • In your code the thumbnail tbm is not working?

  • I updated the code, test there.

  • I am glad that you have shared with me some of your knowledge, although I do not know why it has not yet worked as it should. But it became clear as learning.

  • I have already found out if your code fails my tests. I will re-edit your answer in exact detail. So it will stay for future research as the second alternative to this question.

2


I believe 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>

  • 1

    I thank you, since already for the time willing to help me. I put my vote on your performance for finalizing with precision and attention.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.