suchen

Heim  >  Artikel  >  Web-Frontend  >  Bild-Slider mit HTML-CSS und Javascript-Codierung https://www.instagram.com/webstreet_code/

Bild-Slider mit HTML-CSS und Javascript-Codierung https://www.instagram.com/webstreet_code/

Barbara Streisand
Barbara StreisandOriginal
2024-11-03 21:28:02452Durchsuche

Image Slider using html css and javascript coding https://www.instagram.com/webstreet_code/

Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/ 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Background Selector</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #121212;
            font-family: Arial, sans-serif;
        }
        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-size: cover;
            background-position: center;
            transition: background-image 0.5s ease;
            z-index: -1;
        }
        .controls {
            position: absolute;
            bottom: 20px;
            display: flex;
            gap: 10px;
        }
        .arrow {
            background-color: rgba(255, 255, 255, 0.7);
            border: none;
            padding: 12px;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .arrow:hover { background-color: rgba(255, 255, 255, 1); }
        .thumbnails {
            display: flex;
            gap: 8px;
        }
        .thumbnails img {
            width: 80px;
            height: 50px;
            object-fit: cover;
            opacity: 0.6;
            transition: opacity 0.3s, border 0.3s;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 8px;
        }
        .thumbnails img.active-thumbnail {
            opacity: 1;
            border: 2px solid yellow;
        }
    </style>
</head>
<body>

<div class="background" id="background"></div>

<div class="controls">
    <div class="thumbnails" id="thumbnails">
        <img src="./nature1.jpg" class="active-thumbnail" data-bg="./nature1.jpg">
        <img src="./nature2.jpg" data-bg="./nature2.jpg">
        <img src="./nature3.jpg" data-bg="./nature3.jpg">
        <img src="./nature4.jpeg" data-bg="./nature4.jpeg">
        <img src="./nature5.jpeg" data-bg="./nature5.jpeg">
    </div>
    <button class="arrow" id="left">&#9664;</button>
    <button class="arrow" id="right">&#9654;</button>
</div>

<script>
    const background = document.getElementById('background');
    const thumbnails = document.querySelectorAll('.thumbnails img');
    let currentIndex = 0;

    // Function to update the background based on the active thumbnail
    const updateBackground = (index) => {
        thumbnails.forEach((thumb, i) => {
            thumb.classList.toggle('active-thumbnail', i === index);
        });
        background.style.backgroundImage = `url(${thumbnails[index].getAttribute('data-bg')})`;
    };

    // Left arrow click event
    document.getElementById('left').onclick = () => {
        currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
        updateBackground(currentIndex);
    };

    // Right arrow click event
    document.getElementById('right').onclick = () => {
        currentIndex = (currentIndex + 1) % thumbnails.length;
        updateBackground(currentIndex);
    };

    // Thumbnail click event to update the background
    thumbnails.forEach((thumb, i) => {
        thumb.onclick = () => {
            currentIndex = i;
            updateBackground(i);
        };
    });

    // Set initial background
    updateBackground(currentIndex);
</script>

</body>
</html>

Das obige ist der detaillierte Inhalt vonBild-Slider mit HTML-CSS und Javascript-Codierung https://www.instagram.com/webstreet_code/. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html using https
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum erhalte ich die Fehlermeldung „jQuery XML Error: Header Missing „Access-Control-Allow-Origin““, wenn ich domänenübergreifende AJAX-Anfragen mache?Nächster Artikel：Warum erhalte ich die Fehlermeldung „jQuery XML Error: Header Missing „Access-Control-Allow-Origin““, wenn ich domänenübergreifende AJAX-Anfragen mache?

In Verbindung stehende Artikel

Mehr sehen