Thiết kế giao diện trang web - Hiệu ứng chuyển ảnh tự động

Phương pháp triển khai hiệu ứng chuyển ảnh bằng CSS thuần có thể tham khảo: Hiệu ứng chuyển ảnh tự động bằng CSS (tự động và thủ công) - Bài viết của *Văn Tú* trên CSDN

Nguồn mã:

Thực hiện chuyển ảnh bằng HTML + CSS + jQuery - mã nguồn hiệu ứng trượt hình ảnh bằng jQuery - CSDN

3 phương pháp đơn giản triển khai hiệu ứng chuyển ảnh bằng JavaScript - JavaScript chuyển ảnh - CSDN

1. HTML + CSS + jQuery

(1) Cấu trúc trang

<div class="slide-container">
    <div class="slide-item"><img src="/images/1.png"></div>
    <div class="slide-item"><img src="/images/2.png"></div>
    <div class="slide-item"><img src="/images/3.jpg"></div>
    <div class="slide-item"><img src="/images/4.jpg"></div>
    <div class="slide-item"><img src="/images/5.jpg"></div>
    <div class="slide-item"><img src="/images/test.png"></div>
    <div class="nav-left"><</div>
    <div class="nav-right">></div>
    <div class="dot-container">
        <ul>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
    </div>
</div>

(2) Định dạng CSS

.slide-container {
    height: 460px;
    width: 1000px;
    position: relative;
}

.slide-item {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 1.5s;
}

.slide-item:nth-child(1) {
    opacity: 1;
}

.slide-item img {
    height: 460px;
    width: 1000px;
}

.nav-left {
    position: absolute;
    left: 0;
    top: 195px;
    width: 35px;
    height: 70px;
    border-radius: 0 5px 5px 0;
    text-align: center;
    line-height: 70px;
    font-size: 27px;
    color: #b0afad;
}

.nav-left:hover {
    background-color: #777777;
    color: #ffffff;
}

.nav-right {
    position: absolute;
    right: 0;
    top: 195px;
    width: 35px;
    height: 70px;
    border-radius: 5px 0 0 5px;
    text-align: center;
    line-height: 70px;
    font-size: 27px;
    color: #b0afad;
}

.nav-right:hover {
    background-color: #777777;
    color: #ffffff;
}

.dot-container {
    position: absolute;
    right: 450px;
    bottom: 20px;
}

.dot-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dot-container ul li {
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background-color: #4a5460;
    float: left;
    margin-right: 10px;
}

.dot-container ul li:hover, .dot-container ul li:nth-child(1) {
    background-color: #ffffff;
}

(3) Triển khai chức năng

<script src="/jquery.min.js"></script>
<script>
    $(function () {
        let current = 0;
        let autoSlide;

        // Chuyển ảnh tự động
        // function startAuto() {
        //     autoSlide = setInterval(() => {
        //         $('.slide-item').css('opacity', 0);
        //         $('.slide-item').eq(current).css('opacity', 1);
        //         $('.dot').css('background', '#4a5460');
        //         $('.dot').eq(current).css('background', '#ffffff');
        //         current = (current + 1) % $('.slide-item').length;
        //     }, 4000);
        // }

        // startAuto();

        // Chuyển ảnh theo nút trái
        $('.nav-left').click(() => {
            clearInterval(autoSlide);
            current = (current - 1 + $('.slide-item').length) % $('.slide-item').length;
            $('.slide-item').css('opacity', 0);
            $('.slide-item').eq(current).css('opacity', 1);
            $('.dot').css('background', '#4a5460');
            $('.dot').eq(current).css('background', '#ffffff');
        });

        // Chuyển ảnh theo nút phải
        $('.nav-right').click(() => {
            clearInterval(autoSlide);
            current = (current + 1) % $('.slide-item').length;
            $('.slide-item').css('opacity', 0);
            $('.slide-item').eq(current).css('opacity', 1);
            $('.dot').css('background', '#4a5460');
            $('.dot').eq(current).css('background', '#ffffff');
        });

        // Chuyển ảnh theo chấm
        $('.dot').click(function () {
            clearInterval(autoSlide);
            current = $(this).index();
            $('.slide-item').css('opacity', 0);
            $('.slide-item').eq(current).css('opacity', 1);
            $('.dot').css('background', '#4a5460');
            $('.dot').eq(current).css('background', '#ffffff');
        });
    })
</script>

2. HTML + CSS + JavaScript thuần

(1) Cấu trúc trang

<div id="slider">
    <ul class="slides">
        <li><img src="/images/1.png"></li>
        <li><img src="/images/2.png"></li>
        <li><img src="/images/3.jpg"></li>
        <li><img src="/images/4.jpg"></li>
        <li><img src="/images/5.jpg"></li>
    </ul>
    <div class="prev-btn"><</div>
    <div class="next-btn">></div>
    <div class="pagination">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

(2) Định dạng CSS

#slider {
    position: relative;
    width: 500px;
    height: 260px;
    overflow: hidden;
    margin: 20px auto;
}

.slides {
    position: absolute;
    width: 2500px;
    height: 260px;
    transition: left 0.5s;
}

.slides li {
    float: left;
    width: 500px;
    height: 100%;
}

.slides img {
    width: 100%;
    height: 100%;
}

.prev-btn, .next-btn {
    width: 30px;
    height: 30px;
    background: #9E9E9E;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #f40;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.pagination li {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 5px;
    cursor: pointer;
}

.pagination li.active {
    background: red;
}

(3) Triển khai chức năng

const slides = document.querySelector('.slides');
const dots = document.querySelectorAll('.pagination li');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentIndex = 0;

function updateDots() {
    dots.forEach((dot, index) => {
        dot.classList.toggle('active', index === currentIndex);
    });
}

prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + dots.length) % dots.length;
    slides.style.left = `-${currentIndex * 500}px`;
    updateDots();
});

nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % dots.length;
    slides.style.left = `-${currentIndex * 500}px`;
    updateDots();
});

dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
        currentIndex = index;
        slides.style.left = `-${currentIndex * 500}px`;
        updateDots();
    });
});

Thẻ: HTML5 CSS3 JavaScript SlideShow FrontendDevelopment

Đăng vào ngày 14 tháng 10 lúc 23:45

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn