SHARE
TWEET

Untitled

a guest Oct 14th, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <title> Ex 3 </title>
  5. <style>
  6.  
  7. img{ width:300px;
  8. height:300px;}
  9.  
  10. button{
  11. width:300px;
  12. border-radius:3px;
  13.  
  14. }
  15.  
  16. div{border-style:solid;
  17. border-color:#D3D0C9;
  18. border-height:3px;
  19. border-width:3px;
  20. margin:20px;
  21. width: 300px;
  22. background-color:#F6F3E7;
  23. display:block;
  24. }
  25.  
  26. </style>
  27.  
  28. </head>
  29. <body>
  30. <div>
  31. <img style="display:none" src="rose.jpg" alt="Rose">
  32. <img style="display:none" src="carnation.jpg" alt="Carnation">
  33. <img style="display:none" src="tulip.jpg" alt="Tulip">
  34. <img style="display:none" src="peony.jpg" alt="Peony">
  35. <img style="display:none" src="orchid.jpg" alt="Orchid">
  36.  
  37.  
  38. <br><br>
  39. <span id="progres"></span>
  40.  
  41. <button onclick="pozaAnt()"> NEXT </button>
  42. <button onclick="pozaUrm()"> PREV </button>
  43. </div>
  44. <script>
  45.     const imagini = document.getElementsByTagName('img');
  46.     const progres = document.getElementById('progres');
  47.     const total = imagini.length;
  48.     let i = 0;
  49.        
  50.     //arata prima poza
  51.     arataPoza(i);
  52.  
  53.     //arata urmatoarea poza
  54.     function pozaUrm(){
  55.         ascundePoza(i);
  56.         i = (i + 1) % total;
  57.         arataPoza(i);
  58.     }
  59.     //arata poza anterioara
  60.     function pozaAnt(){
  61.         ascundePoza(i);
  62.         i = (i-1)%(total);
  63.         if(i < 0){
  64.             i = total-1;
  65.         }
  66.         arataPoza(i);
  67.     }
  68.     function ascundePoza(i){
  69.         imagini[i].style.display = 'none';
  70.     }
  71.     function arataPoza(i){
  72.         imagini[i].style.display = 'block';
  73.         progres.textContent = `${(i+1)}/${total}`;
  74.     }
  75.  </script>
  76.  
  77.  
  78. </body>
  79.  
  80. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top