پیاده‌سازی اسلایدشو تصاویر با دکمه‌های ناوبری و تغییر خودکار

User 7250 سوال کاربر 406 visibility link download flag

برنامه‌ای بنویسید که یک صفحه وب با اسلایدشو ایجاد کند. در این صفحه حداقل ۳ تصویر قرار داشته باشد که در هر لحظه فقط یکی نمایش داده شود. تصاویر به صورت خودکار هر ۵ ثانیه به تصویر بعدی تغییر کنند. همچنین دو دکمه برای حرکت دستی به تصویر قبلی و بعدی فراهم شود.

مثال خروجی مورد انتظار: نمایش تصویر اول، پس از ۵ ثانیه تغییر به تصویر دوم، و امکان جابجایی تصاویر با دکمه‌ها.

👨‍💻 1 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

reply 2

visibility 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Slideshow</title>
<style>
  #slideshow {
    width: 600px;
    height: 400px;
    position: relative;
    margin: auto;
  }
  #slideshow img {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0; left: 0;
  }
  #slideshow img.active {
    display: block;
  }
  #controls {
    text-align: center;
    margin-top: 10px;
  }
  button {
    padding: 8px 16px;
    margin: 0 10px;
    font-size: 16px;
  }
</style>
</head>
<body>

<div id="slideshow">
  <img src="https://via.placeholder.com/600x400?text=Image+1" class="active" />
  <img src="https://via.placeholder.com/600x400?text=Image+2" />
  <img src="https://via.placeholder.com/600x400?text=Image+3" />
</div>

<div id="controls">
  <button id="prevBtn">Previous</button>
  <button id="nextBtn">Next</button>
</div>

<script>
  const images = document.querySelectorAll('#slideshow img');
  let currentIndex = 0;
  let interval = setInterval(nextImage, 5000);

  function showImage(index) {
    images.forEach((img, i) => {
      img.classList.toggle('active', i === index);
    });
  }

  function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
  }

  function prevImage() {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showImage(currentIndex);
  }

  document.getElementById('nextBtn').addEventListener('click', () => {
    clearInterval(interval);
    nextImage();
    interval = setInterval(nextImage, 5000);
  });

  document.getElementById('prevBtn').addEventListener('click', () => {
    clearInterval(interval);
    prevImage();
    interval = setInterval(nextImage, 5000);
  });
</script>

</body>
</html>
Ai JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider</title>

    <style>

        @font-face {
            font-family: "firacode";
            src: url(./FiraCode-Medium.ttf);
        }
        * {
            user-select: none;
            box-sizing: border-box;
            margin: auto;
            font-family: "firacode";
            text-align: center;
            color: #dbdbdb;
            transition: all 0.4s ease;
        }
        body {
            background-color: #101010;
        }
        header {
            width: 70%;
            max-width: 550px;
            margin: 20px auto;
            padding: 17px;
            background-color: #202020;
            border: 7px solid #313131;
            border-radius: 15px;
        }
        #slider {
            position: relative;
            width: 90%;
            max-width: 620px;
            margin: 20px auto;
            padding: 15px;
            background-color: #202020;
            border: 7px solid #313131;
            border-radius: 15px;
        }
        button {
            all: unset;
            display: inline;
            padding: 15px;
            margin: 5px auto;
            width: 30%;
            height: auto;
            color: white;
            background-color: #303030;
            border: 2px solid rgb(68, 68, 68);
            border-radius: 4px;
            transition: all 0.4s ease-in-out;
            font-size: 20px;
        }
        button:hover {
            cursor: pointer;
            background-color: #404040;
            transform: translateY(-2px);
        }
        img {
            width: 80%;
            max-width: 370px;
            height: auto;
            background-color: #252525;
            border: 5px solid #505050;
            border-radius: 50%;
            transition: opacity 0.5s ease-in-out;
        }

    </style>

</head>
<body>

    <header><h1>Slider</h1></header>

    <section id="slider">
        <img src="1.png">
        <button onclick="change(false)"> &#8592; </button>
        <button onclick="change(true)"> &#8594; </button>
    </section>

    <script>
        let img = document.querySelector("#slider img")
        let items = ["1.png","2.png","3.png","4.png","5.png"]
        let index = 0

        let changeSrc = ()=>{
            img.style.opacity = 0
            setTimeout(()=>{
                img.src = items[index]    
            },500)
            img.onload = ()=>{
                img.style.opacity = 1
            }
        }

        let change = (isNext)=>{
            if (isNext) {
                index++
                if (index >= items.length){index = 0}
                changeSrc(img, items[index])
            } else {
                index--
                if (index == -1){index = items.length-1}
                changeSrc(img, items[index])
            }
        }
    </script>

</body>
</html>
Shayancoder JavaScript HTML & CSS

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن