jQuery焦点图展示效果

原创 已于 2025-06-27 13:50:31 修改 · 644 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#焦点图

于 2025-05-30 14:15:43 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery焦点图展示效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: #f5f5f5;
        }
        
        .slider-container {
            width: 800px;
            height: 400px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            border-radius: 8px;
        }
        
        .slider {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .slide {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
            background-size: cover;
            background-position: center;
        }
        
        .slide.active {
            opacity: 1;
        }
        
        .slide-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 20px;
        }
        
        .slide-content h3 {
            margin-bottom: 10px;
            font-size: 24px;
        }
        
        .slide-content p {
            font-size: 16px;
            line-height: 1.5;
        }
        
        .slider-nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            z-index: 10;
        }
        
        .slider-nav-item {
            width: 12px;
            height: 12px;
            margin: 0 5px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .slider-nav-item.active {
            background: white;
        }
        
        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            font-size: 20px;
            transition: background 0.3s;
        }
        
        .slider-arrow:hover {
            background: rgba(0, 0, 0, 0.8);
        }
        
        .slider-arrow.prev {
            left: 20px;
        }
        
        .slider-arrow.next {
            right: 20px;
        }
        
        .credit {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }
        
        .credit a {
            color: #666;
            text-decoration: none;
        }
        
        .credit a:hover {
            color: #333;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="slider-container">
        <div class="slider">
            <div class="slide active" style="background-image: url('https://picsum.photos/800/400?random=1')">
                <div class="slide-content">
                    <h3>第一张幻灯片</h3>
                    <p>这是焦点图的第一张幻灯片内容，展示网站的重要信息。</p>
                </div>
            </div>
            <div class="slide" style="background-image: url('https://picsum.photos/800/400?random=2')">
                <div class="slide-content">
                    <h3>第二张幻灯片</h3>
                    <p>这是焦点图的第二张幻灯片内容，展示产品的特色功能。</p>
                </div>
            </div>
            <div class="slide" style="background-image: url('https://picsum.photos/800/400?random=3')">
                <div class="slide-content">
                    <h3>第三张幻灯片</h3>
                    <p>这是焦点图的第三张幻灯片内容，展示最新的促销活动。</p>
                </div>
            </div>
            <div class="slide" style="background-image: url('https://picsum.photos/800/400?random=4')">
                <div class="slide-content">
                    <h3>第四张幻灯片</h3>
                    <p>这是焦点图的第四张幻灯片内容，展示客户评价和反馈。</p>
                </div>
            </div>
        </div>
        
        <div class="slider-nav">
            <div class="slider-nav-item active" data-index="0"></div>
            <div class="slider-nav-item" data-index="1"></div>
            <div class="slider-nav-item" data-index="2"></div>
            <div class="slider-nav-item" data-index="3"></div>
        </div>
        
        <div class="slider-arrow prev">❮</div>
        <div class="slider-arrow next">❯</div>
    </div>
    
    <div class="credit">
        图片来自 <a href="https://picsum.photos/" target="_blank">Lorem Picsum</a>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            const slides = $('.slide');
            const navItems = $('.slider-nav-item');
            let currentIndex = 0;
            let slideInterval;
            
            // 初始化轮播
            function initSlider() {
                startSlideShow();
                
                // 点击导航点切换
                navItems.on('click', function() {
                    const index = $(this).data('index');
                    goToSlide(index);
                });
                
                // 上一张按钮
                $('.prev').on('click', function() {
                    goToPrevSlide();
                });
                
                // 下一张按钮
                $('.next').on('click', function() {
                    goToNextSlide();
                });
                
                // 鼠标悬停暂停轮播
                $('.slider-container').hover(
                    function() {
                        stopSlideShow();
                    },
                    function() {
                        startSlideShow();
                    }
                );
            }
            
            // 开始自动轮播
            function startSlideShow() {
                stopSlideShow();
                slideInterval = setInterval(goToNextSlide, 3000);
            }
            
            // 停止自动轮播
            function stopSlideShow() {
                clearInterval(slideInterval);
            }
            
            // 切换到指定幻灯片
            function goToSlide(index) {
                if (index >= slides.length) {
                    index = 0;
                } else if (index < 0) {
                    index = slides.length - 1;
                }
                
                slides.removeClass('active');
                $(slides[index]).addClass('active');
                
                navItems.removeClass('active');
                $(navItems[index]).addClass('active');
                
                currentIndex = index;
            }
            
            // 切换到下一张幻灯片
            function goToNextSlide() {
                goToSlide(currentIndex + 1);
            }
            
            // 切换到上一张幻灯片
            function goToPrevSlide() {
                goToSlide(currentIndex - 1);
            }
            
            // 初始化轮播
            initSlider();
        });
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值