Skip to main content
adicionou 80 caracteres ao conteúdo
Fonte Link
thxmxx
  • 550
  • 2
  • 6

Fiz um exemplo pra você, baseado no seu código.

Plunkr

index.html

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="slideshow-container">
      <img name="slide" style="width:100%"/>
    </div>
    <button onClick="prevImg()">Anterior</button>
    <button onClick="nextImg()">Próxima</button>
    <br/>
  </body>

</html>

script.js

var i = 0;-1;
var images = ['http://worldartsme.com/images/angry-birds-clipart-    1.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem-3.jpg'];

function nextImg(){
  document.slide.src = images[(i++++i)%3];
  if (i>=images.length) return true; //fim da lista
  return false;
}

function prevImg(){
  document.slide.src = images[(i = i<0i<=0 ? 0 : i--1)%3];
}

style.css


window.onload *= () => {
  let time = 3000;
  box-sizing:let border-box;
id_interval }

= .slideshow-containersetInterval(() => {
      max-width:if(nextImg()) 1000px;{
      position: relative;clearInterval(id_interval);
    }
  margin:}, auto;time);
  }

Fiz um exemplo pra você, baseado no seu código.

Plunkr

index.html

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="slideshow-container">
      <img name="slide" style="width:100%"/>
    </div>
    <button onClick="prevImg()">Anterior</button>
    <button onClick="nextImg()">Próxima</button>
    <br/>
  </body>

</html>

script.js

var i = 0;
var images = ['http://worldartsme.com/images/angry-birds-clipart-    1.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem-3.jpg'];

function nextImg(){
  document.slide.src = images[(i++)%3];
}

function prevImg(){
  document.slide.src = images[(i = i<0 ? 0 : i--)%3];
}

style.css

 * {
       box-sizing: border-box;
 }

 .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
  }

Fiz um exemplo pra você, baseado no seu código.

Plunkr

index.html

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="slideshow-container">
      <img name="slide" style="width:100%"/>
    </div>
    <button onClick="prevImg()">Anterior</button>
    <button onClick="nextImg()">Próxima</button>
    <br/>
  </body>

</html>

script.js

var i = -1;
var images = ['http://worldartsme.com/images/angry-birds-clipart-1.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem-3.jpg'];

function nextImg(){
  document.slide.src = images[(++i)%3];
  if (i>=images.length) return true; //fim da lista
  return false;
}

function prevImg(){
  document.slide.src = images[(i = i<=0 ? 0 : i-1)%3];
}

window.onload = () => {
  let time = 3000;
  let id_interval = setInterval(() => {
    if(nextImg()) {
      clearInterval(id_interval);
    }
  }, time);
}
adicionou 1160 caracteres ao conteúdo
Fonte Link
thxmxx
  • 550
  • 2
  • 6

Fiz um exemplo pra você, baseado no seu código.

Plunkr

index.html

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="slideshow-container">
      <img name="slide" style="width:100%"/>
    </div>
    <button onClick="prevImg()">Anterior</button>
    <button onClick="nextImg()">Próxima</button>
    <br/>
  </body>

</html>

script.js

var i = 0;
var images = ['http://worldartsme.com/images/angry-birds-clipart-    1.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem-3.jpg'];

function nextImg(){
  document.slide.src = images[(i++)%3];
}

function prevImg(){
  document.slide.src = images[(i = i<0 ? 0 : i--)%3];
}

style.css

 * {
       box-sizing: border-box;
 }

 .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
  }

Fiz um exemplo pra você, baseado no seu código.

Plunkr

Fiz um exemplo pra você, baseado no seu código.

Plunkr

index.html

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="slideshow-container">
      <img name="slide" style="width:100%"/>
    </div>
    <button onClick="prevImg()">Anterior</button>
    <button onClick="nextImg()">Próxima</button>
    <br/>
  </body>

</html>

script.js

var i = 0;
var images = ['http://worldartsme.com/images/angry-birds-clipart-    1.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem.jpg',
          'https://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem-3.jpg'];

function nextImg(){
  document.slide.src = images[(i++)%3];
}

function prevImg(){
  document.slide.src = images[(i = i<0 ? 0 : i--)%3];
}

style.css

 * {
       box-sizing: border-box;
 }

 .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
  }
Fonte Link
thxmxx
  • 550
  • 2
  • 6

Fiz um exemplo pra você, baseado no seu código.

Plunkr