var satual =1;
smax=3;
stmp=3000;
// ocultando os tres imagens e exibindo o 1º
function troca(){
document.getElementById("b1").style.visibility="hidden";
document.getElementById("b2").style.visibility="hidden";
document.getElementById("b3").style.visibility="hidden";
// exibindo imagem atual
document.getElementById("b"+satual).style.visibility="visible";
satual=satual+1;
if(satual>smax){
satual = 1;
}
}
// funcao de iniciar o slider
function slider(){
document.getElementById("b1").style.visibility="hidden";
document.getElementById("b2").style.visibility="hidden";
document.getElementById("b3").style.visibility="visible";
// chama uma funcao a cada tempo
interval=setInterval(troca,stmp);
}
function next(){
clearInterval(interval);
satual++;
if(satual>smax){
satual = 1;
}
document.getElementById("b1").style.visibility="hidden";
document.getElementById("b2").style.visibility="hidden";
document.getElementById("b3").style.visibility="hidden";
// exibindo imagem atual
document.getElementById("b"+satual).style.visibility="visible";
interval=setInterval(troca,stmp);
}
function anterior(){
clearInterval(interval);
satual--;
if(satual>smax){
satual = 1;
}
if(satual<1){
satual=3;
}
document.getElementById("b1").style.visibility="hidden";
document.getElementById("b2").style.visibility="hidden";
document.getElementById("b3").style.visibility="hidden";
// exibindo imagem atual
document.getElementById("b"+satual).style.visibility="visible";
interval=setInterval(troca,stmp);
}
2 Respostas
Você apenas se esqueceu de declarar a var interval
de forma global.
var satual =1,
smax=3,
stmp=3000,
interval = null;
// ocultando os tres imagens e exibindo o 1º
function troca(){
document.getElementById("b1").style.visibility="hidden";
document.getElementById("b2").style.visibility="hidden";
document.getElementById("b3").style.visibility="hidden";
// exibindo imagem atual
document.getElementById("b"+satual).style.visibility="visible";
satual=satual+1;
if(satual>smax){
satual = 1;
}
}
// funcao de iniciar o slider
function slider(){
document.getElementById("b1").style.visibility="hidden";
document.getElementById("b2").style.visibility="hidden";
document.getElementById("b3").style.visibility="visible";
// chama uma funcao a cada tempo
interval=setInterval(troca,stmp);
}
function next(){
clearInterval(interval);
satual++;
if(satual>smax){
satual = 1;
}
document.getElementById("b1").style.visibility="hidden";
document.getElementById("b2").style.visibility="hidden";
document.getElementById("b3").style.visibility="hidden";
// exibindo imagem atual
document.getElementById("b"+satual).style.visibility="visible";
interval=setInterval(troca,stmp);
}
function anterior(){
clearInterval(interval);
satual--;
if(satual>smax){
satual = 1;
}
if(satual<1){
satual=3;
}
document.getElementById("b1").style.visibility="hidden";
document.getElementById("b2").style.visibility="hidden";
document.getElementById("b3").style.visibility="hidden";
// exibindo imagem atual
document.getElementById("b"+satual).style.visibility="visible";
interval=setInterval(troca,stmp);
}
slider();
//troca();
#d{
position:relative;
float:left;
}
#b1, #b2, #b3{
position: absolute;
top:30px;
left:0;
width:300px;
height:250px;
overflow:hidden;
}
<div id="d">
<div id="b1">
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
</div>
<div id="b2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNBH9qYupzMRbEK9XFWwHeP9gQyjtMGVoiLGP7eu4PDHqGU2sH" />
</div>
<div id="b3">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnWaPlh6j_fPgYMtW9Xv-IE0XMLIYC5SfMNfTdR_MJKXDqEMEP" />
</div>
</div>
<button onclick="anterior()"> voltar </button>
<button onclick="next()"> avancar </button>
Eu mudei seu código um pouco para evitar a repetição de código, mas basicamente o que estava acontecendo era que na função troca
você exibia o slide e depois selecionava o próximo slide, mas em next
e anterior
você primeiro selecionava o slide a ser exibido e depois exibia ele.
Então o que acontecia era que você exibia o slide 3 e marcava o próximo como 1, mas quando o usuário clicava para exibir o próximo, você selecionava que o próximo era 2 (por que você incrementa satual
de 1 para 2) e exibe ele.
Abaixo tem um snippet com o código funcionando.
var satual = 3;
var smax = 3;
var stmp = 3000;
var interval;
slider();
// funcao de iniciar o slider
function slider() {
exibeSlide(satual);
// chama uma funcao a cada tempo
interval = setInterval(troca, stmp);
}
function exibeSlide(index) {
document.getElementById("b1").style.visibility = "hidden";
document.getElementById("b2").style.visibility = "hidden";
document.getElementById("b3").style.visibility = "hidden";
// exibindo imagem com index
document.getElementById("b" + index).style.visibility = "visible";
}
function troca() {
satual = satual + 1;
if (satual > smax) {
satual = 1;
}
exibeSlide(satual);
}
function next() {
clearInterval(interval);
satual++;
if (satual > smax) {
satual = 1;
}
exibeSlide(satual);
interval = setInterval(troca, stmp);
}
function anterior() {
clearInterval(interval);
satual--;
if (satual < 1) {
satual = 3;
}
exibeSlide(satual);
interval = setInterval(troca, stmp);
}
<div id="b1"><p>1</p></div>
<div id="b2"><p>2</p></div>
<div id="b3"><p>3</p></div>
<a href="#" onclick="anterior()">Anterior</a>
<a href="#" onclick="next()">Próximo</a>
setInterval
porsetTimeout
?