新闻门户网站图片相册

已于 2025-06-27 13:47:57 修改
阅读量592 收藏 14
点赞数 20
CC 4.0 BY-SA版权
文章标签： css html javascript
于 2025-05-30 15:22:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148339072

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻门户网站图片相册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 0;
            background-color: #1e88e5;
            color: white;
            border-radius: 5px;
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .slider-container {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
        }
        
        .slider {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease-in-out;
        }
        
        .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .slide-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 15px;
        }
        
        .slide-caption h3 {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        .slide-caption p {
            font-size: 14px;
        }
        
        .slider-controls {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .slider-nav {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ccc;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .slider-dot.active {
            background-color: #1e88e5;
        }
        
        .btn {
            padding: 8px 16px;
            margin: 0 10px;
            background-color: #1e88e5;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #1565c0;
        }
        
        .news-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        
        .news-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .news-card:hover {
            transform: translateY(-5px);
        }
        
        .news-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .news-card-content {
            padding: 15px;
        }
        
        .news-card h3 {
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
        }
        
        .news-card p {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        
        .news-card a {
            color: #1e88e5;
            text-decoration: none;
            font-size: 14px;
            display: inline-block;
        }
        
        .news-card a:hover {
            text-decoration: underline;
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            margin-top: 40px;
            background-color: #1e88e5;
            color: white;
            border-radius: 5px;
        }
        
        .footer a {
            color: white;
            text-decoration: none;
        }
        
        .footer a:hover {
            text-decoration: underline;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .slider-container {
                height: 300px;
            }
            
            .news-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 480px) {
            .slider-container {
                height: 250px;
            }
            
            .news-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>新闻门户网站</h1>
            <p>最新新闻资讯与图片报道</p>
        </header>
        
        <div class="slider-container">
            <div class="slider">
                <div class="slide">
                    <img src="https://picsum.photos/1200/400?random=1" alt="新闻图片1">
                    <div class="slide-caption">
                        <h3>国际新闻头条</h3>
                        <p>全球领导人峰会今日在北京举行，讨论气候变化等重要议题</p>
                    </div>
                </div>
                <div class="slide">
                    <img src="https://picsum.photos/1200/400?random=2" alt="新闻图片2">
                    <div class="slide-caption">
                        <h3>科技前沿</h3>
                        <p>最新人工智能技术突破，将改变未来生活方式</p>
                    </div>
                </div>
                <div class="slide">
                    <img src="https://picsum.photos/1200/400?random=3" alt="新闻图片3">
                    <div class="slide-caption">
                        <h3>体育赛事</h3>
                        <p>世界杯预选赛激烈进行，国家队取得关键胜利</p>
                    </div>
                </div>
                <div class="slide">
                    <img src="https://picsum.photos/1200/400?random=4" alt="新闻图片4">
                    <div class="slide-caption">
                        <h3>经济动态</h3>
                        <p>股市今日大涨，投资者信心恢复</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="slider-controls">
            <button class="btn prev-btn">上一张</button>
            <button class="btn next-btn">下一张</button>
        </div>
        
        <div class="slider-nav">
            <div class="slider-dot active" data-index="0"></div>
            <div class="slider-dot" data-index="1"></div>
            <div class="slider-dot" data-index="2"></div>
            <div class="slider-dot" data-index="3"></div>
        </div>
        
        <div class="news-grid">
            <div class="news-card">
                <img src="https://picsum.photos/400/300?random=5" alt="新闻1">
                <div class="news-card-content">
                    <h3>城市交通新规划公布</h3>
                    <p>市政府今日公布了未来五年的城市交通发展规划，将新增三条地铁线路...</p>
                </div>
            </div>
            <div class="news-card">
                <img src="https://picsum.photos/400/300?random=6" alt="新闻2">
                <div class="news-card-content">
                    <h3>教育改革方案出台</h3>
                    <p>教育部发布最新教育改革方案，将重点推进素质教育...</p>
                    <a href="#">阅读更多</a>
                </div>
            </div>
            <div class="news-card">
                <img src="https://picsum.photos/400/300?random=7" alt="新闻3">
                <div class="news-card-content">
                    <h3>医疗健康新发现</h3>
                    <p>科学家发现新型抗癌药物，临床试验显示效果显著...</p>
                    <a href="#">阅读更多</a>
                </div>
            </div>
            <div class="news-card">
                <img src="https://picsum.photos/400/300?random=8" alt="新闻4">
                <div class="news-card-content">
                    <h3>文化旅游节开幕</h3>
                    <p>一年一度的文化旅游节今日开幕，吸引了众多游客前来参观...</p>
                    <a href="#">阅读更多</a>
                </div>
            </div>
            <div class="news-card">
                <img src="https://picsum.photos/400/300?random=9" alt="新闻5">
                <div class="news-card-content">
                    <h3>环保新举措</h3>
                    <p>政府推出新的环保政策，将限制一次性塑料制品的使用...</p>
                    <a href="#">阅读更多</a>
                </div>
            </div>
            <div class="news-card">
                <img src="https://picsum.photos/400/300?random=10" alt="新闻6">
                <div class="news-card-content">
                    <h3>科技创新大赛</h3>
                    <p>全国青少年科技创新大赛圆满结束，多个项目获得投资...</p>
                    <a href="#">阅读更多</a>
                </div>
            </div>
        </div>
        
        <footer class="footer">
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            const slider = $('.slider');
            const slides = $('.slide');
            const dots = $('.slider-dot');
            const prevBtn = $('.prev-btn');
            const nextBtn = $('.next-btn');
            
            let currentIndex = 0;
            const slideCount = slides.length;
            
            // 初始化幻灯片位置
            function updateSlider() {
                slider.css('transform', `translateX(-${currentIndex * 100}%)`);
                
                // 更新指示点状态
                dots.removeClass('active');
                dots.eq(currentIndex).addClass('active');
            }
            
            // 自动轮播
            let autoSlide = setInterval(() => {
                currentIndex = (currentIndex + 1) % slideCount;
                updateSlider();
            }, 5000);
            
            // 点击指示点切换
            dots.on('click', function() {
                currentIndex = parseInt($(this).attr('data-index'));
                updateSlider();
                
                // 重置自动轮播计时器
                clearInterval(autoSlide);
                autoSlide = setInterval(() => {
                    currentIndex = (currentIndex + 1) % slideCount;
                    updateSlider();
                }, 5000);
            });
            
            // 上一张按钮
            prevBtn.on('click', function() {
                currentIndex = (currentIndex - 1 + slideCount) % slideCount;
                updateSlider();
                
                // 重置自动轮播计时器
                clearInterval(autoSlide);
                autoSlide = setInterval(() => {
                    currentIndex = (currentIndex + 1) % slideCount;
                    updateSlider();
                }, 5000);
            });
            
            // 下一张按钮
            nextBtn.on('click', function() {
                currentIndex = (currentIndex + 1) % slideCount;
                updateSlider();
                
                // 重置自动轮播计时器
                clearInterval(autoSlide);
                autoSlide = setInterval(() => {
                    currentIndex = (currentIndex + 1) % slideCount;
                    updateSlider();
                }, 5000);
            });
            
            // 鼠标悬停暂停轮播
            $('.slider-container').hover(
                function() {
                    clearInterval(autoSlide);
                },
                function() {
                    autoSlide = setInterval(() => {
                        currentIndex = (currentIndex + 1) % slideCount;
                        updateSlider();
                    }, 5000);
                }
            );
        });
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值