Jump to content

lithoykai

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by lithoykai

    Need some help with my manga reader

    in JavaScript

    Posted

    Well, I'm trying to make it so that the slide ends on the last page and shows a sign that whoever's reading has reached the end, but I'm not too experient on JavaScript, could you guys help me on that? Here's the code: 

    <html>
<title>Terra Formars</title>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link>
<style>
.mySlides {display:none}
</style>
<body>

<div class="w3-container">
  <h2>
Leitor BETA</h2>
<p>Capítulo 202 de Terra Formars.</p>
</div>
<div class="w3-center">
  <div class="w3-section">
    <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
    <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
  </div>
</div>
<div class="w3-content">
  <img class="mySlides" src="https://i.ibb.co/fqQw2mX/00.png" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/CQ9VjsF/01.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/FVfsh9c/02.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/sq7czrk/03.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/By7k2J4/04.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/NnYp2xH/05.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/cXkgpK0/06.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/CW8fr43/07.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/LJ25GnH/08.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/Khbg5h9/09.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/wRrdp5T/10.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/TTnfdvv/11.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/72rLfpX/12.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/x8zR2yp/13.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/zXv7HJg/14.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/4tkwzt8/15.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/hHW04cS/16.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/dGx73nH/17.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/rx8G6Yr/18.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/4W1v7WS/19.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/qMYLTJz/20.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/3yG8h2N/22.jpg" style="width: 100%;" />
</div>
<div class="w3-center">
<div class="w3-section">
    <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
    <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
  </div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-red", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-";
}
</script>
</body>
</html>

     

×
×
  • Create New...