NickAndNick

Ротация картинок на JavaScript через z-index

Dec 26th, 2017
336
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="ru">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Документ</title>
  6.   <style>
  7.     html, body {
  8.       height: 100%;
  9.     }
  10.     .box {
  11.       position: absolute;
  12.       width: 600px;
  13.       height: 600px;
  14.       padding: 0;
  15.     }
  16.     .photo {
  17.       width: 600px;
  18.       margin: 0;
  19.     }
  20.   </style>
  21.   <script>
  22.     const rotate = () => {
  23.       const images = document.querySelectorAll('.box');
  24.       let pos = 0;
  25.       setInterval(() => {
  26.         let index = Number.parseInt(images.item(pos).style.zIndex, 10)
  27.         images.item(pos).style.zIndex = index + images.length;
  28.         pos += 1;
  29.         if (pos >= images.length) pos = 0;
  30.       }, 3000);
  31.     }
  32.     window.addEventListener('load', rotate);
  33.   </script>
  34. </head>
  35. <body>
  36.   <div class="box" style="z-index:1">
  37.     <img class="photo" src="https://otvet.imgsmail.ru/download/7dfb2b4f57d07847577c235132f03ff7_i-25.jpg" alt="1">
  38.   </div>
  39.   <div class="box" style="z-index:2">
  40.     <img class="photo" src="https://content-7.foto.my.mail.ru/mail/go-akko/_musicplaylistcover/i-604.jpg" alt="2">
  41.   </div>
  42.   <div class="box" style="z-index:3">
  43.     <img class="photo" src="http://www.smiufa.ru/docs/mail_600x600.jpg" alt="3">
  44.   </div>
  45.   <div class="box" style="z-index:4">
  46.     <img class="photo" src="https://content-11.foto.my.mail.ru/mail/rednack.drugov/_musicplaylistcover/i-7.jpg" alt="4">
  47.   </div>
  48. </body>
  49. </html>
RAW Paste Data