手把手带你前端快速入门_技术笔记

慕粉2038322838 2025-03-16
<!DOCTYPE html>
<html>
<head>
    <style>
        /* 基础样式 */
        .banner-container {
            position: relative;
            width: 1200px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }

        /* 图片列表 */
        .banner-list {
            display: flex;
            transition: transform 0.5s ease;
            width: 6000px; /* 单张图片宽度1200×5张 */
        }

        .banner-item {
            width: 1200px;
            height: 400px;
            flex-shrink: 0;
        }

        /* 导航圆点 */
        .dot-nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .dot-item {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: background 0.3s;
        }

        .dot-item.active  {
            background: #fff;
        }

        /* 箭头按钮 */
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.3);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .banner-container:hover .arrow {
            opacity: 1;
        }

        .arrow.prev  { left: 20px; }
        .arrow.next  { right: 20px; }
    </style>
</head>
<body>
    <div class="banner-container">
        <div class="banner-list">
            <img src="img1.jpg"  class="banner-item">
            <img src="img2.jpg"  class="banner-item">
            <img src="img3.jpg"  class="banner-item">
            <img src="img4.jpg"  class="banner-item">
            <img src="img5.jpg"  class="banner-item">
        </div>
        
        <!-- 导航箭头 -->
        <div class="arrow prev">‹</div>
        <div class="arrow next">›</div>
        
        <!-- 导航圆点 -->
        <div class="dot-nav"></div>
    </div>

    <script>
        const banner = {
            container: document.querySelector('.banner-container'), 
            list: document.querySelector('.banner-list'), 
            items: document.querySelectorAll('.banner-item'), 
            currentIndex: 0,
            timer: null,
            
            init() {
                // 生成导航圆点
                const dotNav = document.querySelector('.dot-nav'); 
                this.items.forEach((_,  index) => {
                    const dot = document.createElement('div'); 
                    dot.className  = `dot-item${index === 0 ? ' active' : ''}`;
                    dot.addEventListener('click',  () => this.goTo(index)); 
                    dotNav.appendChild(dot); 
                });

                // 箭头事件
                document.querySelector('.arrow.prev').addEventListener('click',  () => this.prev()); 
                document.querySelector('.arrow.next').addEventListener('click',  () => this.next()); 

                // 自动播放
                this.autoPlay(); 
                
                // 悬停暂停
                this.container.addEventListener('mouseenter',  () => clearInterval(this.timer)); 
                this.container.addEventListener('mouseleave',  () => this.autoPlay()); 
            },

            updatePosition() {
                this.list.style.transform  = `translateX(-${this.currentIndex  * 1200}px)`;
                document.querySelectorAll('.dot-item').forEach((dot,  index) => {
                    dot.classList.toggle('active',  index === this.currentIndex); 
                });
            },

            prev() {
                this.currentIndex  = (this.currentIndex  - 1 + this.items.length)  % this.items.length; 
                this.updatePosition(); 
            },

            next() {
                this.currentIndex  = (this.currentIndex  + 1) % this.items.length; 
                this.updatePosition(); 
            },

            goTo(index) {
                this.currentIndex  = index;
                this.updatePosition(); 
            },

            autoPlay() {
                this.timer  = setInterval(() => this.next(),  3000);
            }
        };

        banner.init(); 
    </script>
</body>
</html>
0赞 · 0采集
数据加载中...