jQuery 广告文字切换动画

已于 2025-06-27 11:03:45 修改
阅读量631 收藏 8
点赞数 14
CC 4.0 BY-SA版权
文章标签： css css3 前端
于 2025-06-21 11:12:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148807754

<!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;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        
        body {
            background: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .ad-container {
            width: 90%;
            max-width: 800px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        
        .ad-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 24px;
            font-weight: bold;
            position: relative;
        }
        
        .ad-title:after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 3px;
        }
        
        .ad-content {
            height: 150px;
            position: relative;
            overflow: hidden;
        }
        
        .ad-text {
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: 20px;
            line-height: 1.6;
            color: #555;
            opacity: 0;
            transition: all 0.8s ease;
            transform: translateY(30px);
        }
        
        .ad-text.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .ad-text.highlight {
            color: #764ba2;
            font-weight: bold;
        }
        
        .ad-nav {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        
        .ad-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            margin: 0 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .ad-dot.active {
            background: #764ba2;
            transform: scale(1.2);
        }
        
        .ad-footer {
            text-align: center;
            margin-top: 30px;
            font-size: 14px;
            color: #888;
        }
        
        .ad-footer a {
            color: #764ba2;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .ad-footer a:hover {
            color: #667eea;
            text-decoration: underline;
        }
        
        /* 装饰元素 */
        .decoration {
            position: absolute;
            border-radius: 50%;
            background: rgba(118, 75, 162, 0.1);
        }
        
        .decoration-1 {
            width: 100px;
            height: 100px;
            top: -30px;
            right: -30px;
        }
        
        .decoration-2 {
            width: 60px;
            height: 60px;
            bottom: -20px;
            left: -20px;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .ad-container {
                padding: 20px;
            }
            
            .ad-title {
                font-size: 20px;
            }
            
            .ad-content {
                height: 120px;
            }
            
            .ad-text {
                font-size: 16px;
            }
        }
        
        /* 特殊动画效果 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .pulse-effect {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body>
    <div class="ad-container">
        <div class="decoration decoration-1"></div>
        <div class="decoration decoration-2"></div>
        
        <h2 class="ad-title">特别推荐</h2>
        
        <div class="ad-content">
            <div class="ad-text active">
                发现<span class="highlight">全新体验</span>，让每一天都与众不同
            </div>
            <div class="ad-text">
                限时优惠<span class="highlight">7折起</span>，机会不容错过
            </div>
            <div class="ad-text">
                专业团队为您打造<span class="highlight">个性化服务</span>
            </div>
            <div class="ad-text">
                加入我们，开启<span class="highlight">品质生活</span>新篇章
            </div>
            <div class="ad-text">
                客户满意度<span class="highlight">98%</span>，值得您信赖
            </div>
        </div>
        
        <div class="ad-nav">
            <div class="ad-dot active" data-index="0"></div>
            <div class="ad-dot" data-index="1"></div>
            <div class="ad-dot" data-index="2"></div>
            <div class="ad-dot" data-index="3"></div>
            <div class="ad-dot" data-index="4"></div>
        </div>
        
        <div class="ad-footer">
          </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 广告文本数组
            const adTexts = $(".ad-text");
            const dots = $(".ad-dot");
            let currentIndex = 0;
            let interval;
            
            // 初始化
            initAdRotation();
            
            // 点击导航点切换广告
            dots.on("click", function() {
                const index = $(this).data("index");
                switchAd(index);
                resetInterval();
            });
            
            // 初始化广告轮播
            function initAdRotation() {
                interval = setInterval(() => {
                    currentIndex = (currentIndex + 1) % adTexts.length;
                    switchAd(currentIndex);
                }, 3000);
            }
            
            // 切换广告
            function switchAd(index) {
                // 移除当前活动状态
                adTexts.removeClass("active");
                dots.removeClass("active");
                
                // 添加新的活动状态
                $(adTexts[index]).addClass("active");
                $(dots[index]).addClass("active");
                
                currentIndex = index;
                
                // 添加脉冲效果
                $(adTexts[index]).find(".highlight").addClass("pulse-effect");
                setTimeout(() => {
                    $(adTexts[index]).find(".highlight").removeClass("pulse-effect");
                }, 1000);
            }
            
            // 重置定时器
            function resetInterval() {
                clearInterval(interval);
                interval = setInterval(() => {
                    currentIndex = (currentIndex + 1) % adTexts.length;
                    switchAd(currentIndex);
                }, 3000);
            }
            
            // 鼠标悬停暂停轮播
            $(".ad-container").hover(
                function() {
                    clearInterval(interval);
                },
                function() {
                    resetInterval();
                }
            );
            
            // 添加随机颜色高亮
            function randomizeHighlightColors() {
                const colors = ["#764ba2", "#667eea", "#ff6b6b", "#20c997", "#fd7e14"];
                $(".highlight").each(function() {
                    const randomColor = colors[Math.floor(Math.random() * colors.length)];
                    $(this).css("color", randomColor);
                });
            }
            
            // 初始化随机颜色
            randomizeHighlightColors();
            
            // 每切换一次改变高亮颜色
            setInterval(randomizeHighlightColors, 3000);
            
            // 装饰元素动画
            function animateDecorations() {
                $(".decoration-1").animate(
                    { top: "-=10", right: "-=10" },
                    2000,
                    "swing",
                    function() {
                        $(this).animate(
                            { top: "+=10", right: "+=10" },
                            2000,
                            "swing"
                        );
                    }
                );
                
                $(".decoration-2").animate(
                    { bottom: "-=10", left: "-=10" },
                    2500,
                    "swing",
                    function() {
                        $(this).animate(
                            { bottom: "+=10", left: "+=10" },
                            2500,
                            "swing"
                        );
                    }
                );
            }
            
            // 启动装饰动画
            animateDecorations();
            setInterval(animateDecorations, 5000);
        });
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值