m0_74011067 2023-12-20 16:49 采纳率: 0%
浏览 49
已结题

用HTML和JS制作一个网页，够100行代码，过年好过

img


用HTML和JavaScript制作一个网页。啦不啦点啦啦德玛西亚。不少于100行

  • 写回答

20条回答 默认 最新

  • 叫兽-郭老师 Java领域新星创作者 2023-12-20 16:50
    关注
    获得1.75元问题酬金

    效果图：

    img

    代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过年好</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        h1 {
            color: #FF6347; /* 火红色 */
        }

        #slideshow-container {
            max-width: 600px;
            margin: auto;
            overflow: hidden;
        }

        .mySlides {
            display: none;
        }

        img {
            width: 100%;
        }

        .navigation {
            margin-top: 20px;
        }

        .navigation a {
            margin: 0 10px;
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h1>新年快乐，万事如意！</h1>

    <div id="slideshow-container">
        <div class="mySlides">
            <img src="C:\Users\caozhen\Desktop\2.jpg" alt="新年快乐1">
        </div>
        <div class="mySlides">
            <img src="C:\Users\caozhen\Desktop\3.jpg" alt="新年快乐2">
        </div>
        <div class="mySlides">
            <img src="C:\Users\caozhen\Desktop\2.jpg" alt="新年快乐1">
        </div>
        <div class="mySlides">
            <img src="C:\Users\caozhen\Desktop\3.jpg" alt="新年快乐2">
        </div>
        <div class="mySlides">
            <img src="C:\Users\caozhen\Desktop\2.jpg" alt="新年快乐1">
        </div>
        <div class="mySlides">
            <img src="C:\Users\caozhen\Desktop\3.jpg" alt="新年快乐2">
        </div>
        <div class="mySlides">
            <img src="C:\Users\caozhen\Desktop\2.jpg" alt="新年快乐1">
        </div>
        <div class="mySlides">
            <img src="C:\Users\caozhen\Desktop\3.jpg" alt="新年快乐2">
        </div>
        <!-- 可以根据需要添加更多的图片 -->

        <!-- 左右切换按钮 -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>

    <div>
            愿新年带给你和你的家人无尽的欢笑和幸福，万事如意！

在这辞旧迎新的美好时刻，祝愿你新的一年里心想事成，步步高升！

愿你在新的一年里收获满满的喜悦，所有的梦想都能如期而至。

新年到来，愿你的生活灿烂如烟花，幸福伴随每一个瞬间。

时光荏苒，新的一年为你开启崭新的篇章，愿你事业腾飞，心想事成！

送走旧年的烦恼，迎来新年的希望，祝你在未来的日子里笑逐颜开。

愿新年带给你温馨、和睦、幸福，所有美好的事物都围绕着你。

逢年过节倍思亲，愿你团聚的日子里充满欢笑和温馨。

在这辉煌的时刻，愿你拥有一个充满希望的新年，未来更加美好！

愿新的一年，你在事业的路上驾轻就熟，生活的河流中顺流而下。
    </div>

    <!-- 导航链接 -->
    <div class="navigation">
        <a href="https://www.douyin.com/">抖音</a>
        <a href="https://www.cnblogs.com/">博客园</a>
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <a href="https://www.csdn.net" target="_blank">CSDN</a>
    </div>

    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            if (n > slides.length) {
                slideIndex = 1;
            }
            if (n < 1) {
                slideIndex = slides.length;
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slides[slideIndex - 1].style.display = "block";
        }
    </script>

</body>
</html>
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 12月28日
  • 修改了问题 12月21日
  • 修改了问题 12月21日
  • 修改了问题 12月20日
  • 展开全部

悬赏问题

  • ¥60 Matlab联合CRUISE仿真编译dll文件报错
  • ¥15 脱敏项目合作，ner需求合作
  • ¥15 脱敏项目合作，ner需求合作
  • ¥30 Matlab打开默认名称带有/的光谱数据
  • ¥50 easyExcel模板 动态单元格合并列
  • ¥15 res.rows如何取值使用
  • ¥15 在odoo17开发环境中，怎么实现库存管理系统，或独立模块设计与AGV小车对接？开发方面应如何设计和开发？请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
  • ¥15 CSP算法实现EEG特征提取，哪一步错了？
  • ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
  • ¥15 vue3前端取消收藏的不会引用collectId