搜索
热搜: 活动 交友 discuz
查看: 167|回复: 7

幻灯图,缩略图按钮模式代码

[复制链接]
  • TA的每日心情
    郁闷
    3 天前
  • 签到天数: 24 天

    连续签到: 10 天

    [LV.4]偶尔看看III

    25

    主题

    49

    回帖

    2496

    积分

    社区管理员

    积分
    2496

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    QQ
    发表于 2025-1-6 23:00:04 | 显示全部楼层 |阅读模式
    11111.jpg


    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>幻灯相册</title>
    7.     <style>
    8.         body {
    9.             font-family: Arial, sans-serif;
    10.         }
    11.         #gallery {
    12.             display: flex;
    13.             overflow: hidden;
    14.             width: 100%px;
    15.             height: 650px;
    16.             position: relative;
    17.             margin: auto;
    18.         }
    19.         #gallery img {
    20.             width: 100%;
    21.             height: 100%;
    22.             transition: transform 0.5s ease;
    23.         }
    24.         #thumbnails {
    25.             display: flex;
    26.             overflow-x: auto;
    27.             white-space: nowrap;
    28.             position: absolute;
    29.             bottom: 10px;
    30.             width: 100%;
    31.             justify-content: center;
    32.         }
    33.         #thumbnails img {
    34.             width: 100px;
    35.             height: 75px;
    36.             margin: 0 5px;
    37.             cursor: pointer;
    38.             border: 2px solid transparent;
    39.         }
    40.         #thumbnails img.active {
    41.             border-color: #333;
    42.         }
    43.         #description {
    44.             position: absolute;
    45.             top: 10px;
    46.             left: 10px;
    47.             background: rgba(0, 0, 0, 0.5);
    48.             color: white;
    49.             padding: 5px;
    50.             border-radius: 5px;
    51.         }
    52.     </style>
    53. </head>
    54. <body>
    55.     <div id="gallery">
    56.         <img src="https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg" alt="图片1" data-desc="这是图片1的描述">
    57.         <img src="https://pic1.imgdb.cn/item/6775f8d6d0e0a243d4ed9e3e.jpg" alt="图片2" data-desc="这是图片2的描述">
    58.         <img src="https://pic1.imgdb.cn/item/67715fd0d0e0a243d4ec3386.jpg" alt="图片3" data-desc="这是图片3的描述">
    59.     </div>
    60.     <div id="thumbnails">
    61.         <img src="https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg" alt="缩略图1">
    62.         <img src="https://pic1.imgdb.cn/item/6775f8d6d0e0a243d4ed9e3e.jpg" alt="缩略图2">
    63.         <img src="https://pic1.imgdb.cn/item/67715fd0d0e0a243d4ec3386.jpg" alt="缩略图3">
    64.     </div>
    65.     <div id="description"></div>

    66.     <script>
    67.         const gallery = document.getElementById('gallery');
    68.         const images = gallery.getElementsByTagName('img');
    69.         const thumbnails = document.getElementById('thumbnails').getElementsByTagName('img');
    70.         const description = document.getElementById('description');
    71.         let currentIndex = 0;
    72.         let intervalId;

    73.         function showImage(index) {
    74.             for (let i = 0; i < images.length; i++) {
    75.                 images[i].style.display = 'none';
    76.                 thumbnails[i].classList.remove('active');
    77.             }
    78.             images[index].style.display = 'block';
    79.             thumbnails[index].classList.add('active');
    80.             description.textContent = images[index].getAttribute('data-desc');
    81.         }

    82.         function startSlideshow() {
    83.             intervalId = setInterval(() => {
    84.                 currentIndex = (currentIndex + 1) % images.length;
    85.                 showImage(currentIndex);
    86.             }, 3000); // 每3秒切换一次图片
    87.         }

    88.         function stopSlideshow() {
    89.             clearInterval(intervalId);
    90.         }

    91.         for (let i = 0; i < thumbnails.length; i++) {
    92.             thumbnails[i].addEventListener('click', () => {
    93.                 stopSlideshow();
    94.                 showImage(i);
    95.                 startSlideshow();
    96.             });
    97.         }

    98.         showImage(currentIndex);
    99.         startSlideshow();
    100.     </script>
    101. </body>
    102. </html>
    复制代码



    哎...今天够累的,签到来了1...
  • TA的每日心情
    开心
    昨天 10:49
  • 签到天数: 28 天

    连续签到: 28 天

    [LV.4]偶尔看看III

    153

    主题

    356

    回帖

    2517

    积分

    社区管理员

    积分
    2517

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理

    发表于 2025-1-7 06:33:22 | 显示全部楼层
    老大又整了个新代码,厉害了!

    点评

    简单代码,需要自己去整合  详情 回复 发表于 2025-1-7 17:58
  • TA的每日心情
    郁闷
    3 天前
  • 签到天数: 24 天

    连续签到: 10 天

    [LV.4]偶尔看看III

    25

    主题

    49

    回帖

    2496

    积分

    社区管理员

    积分
    2496

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    QQ
     楼主| 发表于 2025-1-7 17:58:45 | 显示全部楼层
    醉美水芙蓉 发表于 2025-1-7 06:33
    老大又整了个新代码,厉害了!

    简单代码,需要自己去整合
    哎...今天够累的,签到来了1...
  • TA的每日心情
    奋斗
    10 小时前
  • 签到天数: 30 天

    连续签到: 30 天

    [LV.5]常住居民I

    30

    主题

    237

    回帖

    853

    积分

    VIP会员

    积分
    853

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献

    发表于 2025-1-8 13:02:28 | 显示全部楼层
    不可动?
    该会员没有填写今日想说内容.
    回复

    使用道具 举报

  • TA的每日心情

    1737429938
  • 签到天数: 24 天

    连续签到: 10 天

    0

    主题

    0

    回帖

    4

    积分

    黑铁会员

    积分
    4

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王

    发表于 2025-1-12 17:46:44 | 显示全部楼层
    赞一个!

    该用户从未签到

    0

    主题

    0

    回帖

    3

    积分

    黑铁会员

    积分
    3
    发表于 2025-1-13 16:57:55 | 显示全部楼层
    学习了,这就去试试
  • TA的每日心情
    奋斗
    2025-1-16 01:13
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初来乍到

    0

    主题

    0

    回帖

    38

    积分

    社区管理员

    积分
    38
    发表于 2025-1-14 21:01:52 | 显示全部楼层
    还是看不懂,复杂

    该用户从未签到

    0

    主题

    0

    回帖

    11

    积分

    黑铁会员

    积分
    11
    发表于 2025-1-14 21:32:37 | 显示全部楼层
    支持一下,期待更多东西
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|纳兰音画网 ( 蜀ICP备2021011087号 )

    GMT+8, 2025-1-24 11:36 , Processed in 0.143763 second(s), 28 queries .

    Powered by Discuz! X3.5

    © 2001-2020 Comsenz Inc.

    快速回复 返回顶部 返回列表