前端课程设计班级网站之网站首页HTML5+css3+js+bootstrap轮播图，显示隐藏

本文链接：https://blog.csdn.net/weixin_63381305/article/details/127909869
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>班级网站</title>
    <style type="text/css">
        * {
            text-decoration: none;
        }
        
        .a0 {
            margin: 0 auto;
            background: url(img/21.png);
            width: 1400px;
        }
        
        .a {
            position: relative;
            width: 1300px;
            height: 150px;
            margin: 0 auto;
            /*background:url(a.png);*/
            text-decoration: none;
        }
        
        .a1 {
            position: absolute;
            top: 10px;
            left: px;
        }
        
        .a2 {
            position: absolute;
            top: 100px;
            left: 400px;
        }
        
        .a3 {
            position: absolute;
            top: 100px;
            left: 550px;
        }
        
        .a4 {
            position: absolute;
            top: 100px;
            left: 700px;
        }
        
        .a5 {
            position: absolute;
            top: 100px;
            left: 850px;
        }
        
        .a6 {
            position: absolute;
            top: 100px;
            left: 1000px;
        }
        
        .a7 {
            position: absolute;
            top: 100px;
            left: 1150px;
        }
        
        .a8 {
            position: absolute;
            top: 70px;
            left: 70px;
            text-shadow: 5px 10px 2px skyblue;
        }
        
        .a9 {
            position: absolute;
            top: 30px;
            left: 600px;
        }
        
        .imgBox {
            width: 1300px;
            height: 350px;
            margin: 0 auto;
            clear: both;
            overflow: hidden;
        }
        
        .imgBox img {
            width: 1300px;
            height: 350px;
        }
        
        .b {
            position: relative;
            width: 1300px;
            height: 300px;
            top: 50px;
            left: 100px;
            background: url();
            text-decoration: none;
        }
        
        .b0 {
            position: absolute;
            top: 0px;
            left: 50px;
        }
        
        .b2 {
            position: absolute;
            top: 10px;
            right: 180px;
        }
        
        .h {
            position: relative;
            left: 0px;
            width: 1400px;
            margin: 0 auto;
        }
        
        .h1 {
            position: absolute;
            top: 50px;
            left: 50px;
        }
        
        .h2 {
            position: absolute;
            top: 50px;
            right: 200px;
        }
        
        .h3 {
            position: absolute;
            top: 20px;
            right: 60px;
        }
        
        .h4 {
            position: absolute;
        }
        
        .ten {
            position: relative;
            left: 100px;
        }
        
        .en {
            position: absolute;
            top: 5px;
            left: 50px;
        }
        
        p {
            font-size: 150%;
            color: blue;
        }
        
        #currentTime {
            position: absolute;
            width: 300px;
            height: 40px;
            line-height: 40px;
            /*background-color:#cccccc;*/
            text-align: center;
        }
        
        .s {
            position: relative;
            right: -1120px;
            top: 50px;
        }
        
        .y0 {
            position: absolute;
            right: 200px;
            top: 15px;
        }
        
        .m0 {
            position: absolute;
            top: 20px;
            left: 450px;
        }
        
        .d0 {
            position: absolute;
            top: 15px;
            right: 90px;
        }
        /*3D翻转*/
        
        .cartoon_1 {
            transition: transform 2s
            /*反转动画关键*/
        }
        
        .cartoon_1:hover {
            transform: rotateY(360deg);
        }
    </style>
    </script>
</head>

<body>
    <div class="a0">
        <div class="d0">
            <a href="天气预报.html">天气预报</a></div>
        <div class="y0"><a href="天气预报.html">夜间模式</a></div>
        <!-- <div class="m0"><img src="m.jpg" alt=""width="70px"></div> -->
        <div class="s">
            <div id="currentTime">
                <script type="text/javascript">
                    setInterval(function() {
                        var date = new Date();
                        var y = date.getFullYear(); //获取年份
                        var M = date.getMonth() + 1; //获取月份
                        //getMonth返回0、1、2、...、11，分别代表1~12月
                        var d = date.getDate(); //获取日期
                        var w = date.getDay(); //获取星期
                        //getDay返回0、1、2、...、6，分别代表周日、周一、...、周六
                        switch (w) {
                            case 1:
                                w = '一';
                                break;
                            case 2:
                                w = '二';
                                break;
                            case 3:
                                w = '三';
                                break;
                            case 4:
                                w = '四';
                                break;
                            case 5:
                                w = '五';
                                break;
                            case 6:
                                w = '六';
                                break;
                            default:
                                w = '日';
                        }
                        var h = date.getHours(); //获取小时
                        if (h >= 0 && h <= 9)
                            h = '0' + h;
                        var m = date.getMinutes(); //获取分钟
                        if (m >= 0 && m <= 9)
                            m = '0' + m;
                        var currentTime = document.getElementById('currentTime');
                        currentTime.innerHTML = y + '年' + M + '月' + d + '日' + '  ' + '星期' + w + '  ' + h + ':' + m;
                    }, 1000)
                </script>
            </div>
        </div>
        <div class="a">
            <div class="a1"><img src="img/a1.png" alt=""></div>
            <div class="a2"> <a href="班级概况.html">班级概况</a></div>
            <div class="a3"><a href="成员管理.html">成员管理</a></div>
            <div class="a4"><a href="教师风采.html">教师风采</a></div>
            <div class="a5"><a href="教学在线.html">教学在线</a></div>
            <div class="a6"><a href="留言板3.html">建议评论</a></div>
            <div class="a7"><a href="班级新闻.html">新闻</a></div>
            <div class="a8">
                <p><i><b>手脑并用，创造分析</b></i></p>
            </div>
            <div class="a9"><input type="search" name="" placeholder="请输入搜索内容"><button>搜索</button></div>
        </div>
        <div class="imgBox">
            <img class="img-slide img" src="img/m1.jpg" alt="1">
            <img class="img-slide img" src="img/m2.jpg" alt="2">
            <img class="img-slide img" src="img/m3.jpg" alt="3">
            <img class="img-slide img" src="img/m4.jpg" alt="4">
        </div>
        <div class="b"><img src="img/m.jpg" alt="" width="50px">
            <div class="b0">
                <p>班级快讯</p>
            </div>
            <div class="b1">
                <ul>
                    <li><a href="">学校举办2022年宣传思想和意识形态工作骨干培训班</a></li>
                    <li><a href="">我校2022年“百日冲刺”就业活动之简历视频大赛圆满举办</a></li>
                    <li><a href="">信息工程学院首届“一起向未来”夏季篮球赛圆满落幕</a></li>
                    <li><a href="">学校举办职业生涯体验嘉年华活动</a></li>
                    <li><a href="">甘肃省职业教育红色文化研学旅行示范基地建设工作推进会在我校召开</a></li>
                    <li><a href="">信息工程学院举办师范生教学技能比赛</a></li>
                </ul>
            </div>
            <div class="b2">
                <img src="img/b2.jpg" alt="" width="500px" height="200px" class="cartoon_1">
            </div>
        </div>
        <div class="ten">
            <img src="img/m.jpg" alt="" width="50px">
            <div class="en">
                <p>班级简介</p>
            </div>
            <div class="ix"></div>
            <div class="out">
                <div class="yo">
                    <img src="" alt="">
                </div>
                <div class="in">
                    <p>这是一个团结奋进的班级体、一个温馨和谐的大家庭、一个生机盎然的乐园、一片纯真圣洁的心灵土壤。
                        <a href="#" id="str" class="btn-slide">[查看详情]</a></p>
                </div>
            </div>
            <div id="hpn" style="display: none;">
                <p style="margin-top:200px;line-height:35px ;">这是一个团结奋进的班级体、一个温馨和谐的大家庭、一个生机盎然的乐园、一片纯真圣洁的心灵土壤。 别样的风采,高昂的斗志。我们阳光,我们幸福,我们是青春洗礼下的青年。我们青春飞扬,我们团结一心,我们相信有梦的地方就会有飞翔。 我们,一个团结,奋斗,优秀的班团体。我们,滚烫的心会聚与这方;我们,耀眼的星会聚于这方,蓝天是我们的底衬,月亮是我们的挚友。偶尔,我们会有一道长长的拖痕划过寂静的夜空,那是我们的辉煌。他们有自信的笑容,散发着自信的气质。一向秉持“成功是别人放弃时我坚持!”的信念,他们朝气蓬勃地迈着坚定的步伐,向着品学兼优的目标前进!
                </p>

            </div>
        </div>

        <div class="h">
            <div class="h4"><img src="img/h0.png" alt="" height="150px" width="1400px"></div>
            <div class="h1"><img src="img/h1.png" alt=""></div>
            <div class="h2"><img src="img/h2.png" alt=""></div>
            <div class="h3"><img src="img/h3.jpg" alt=""></div>
        </div>
        <script type="text/javascript">
            var index = 0;
            //改变图片
            function ChangeImg() {
                index++;
                var a = document.getElementsByClassName("img-slide");
                if (index >= a.length) index = 0;
                for (var i = 0; i < a.length; i++) {
                    a[i].style.display = 'none';
                }
                a[index].style.display = 'block';
            }
            //设置定时器，每隔两秒切换一张图片
            setInterval(ChangeImg, 4000);
            //展开
            window.onload = function() {
                var a = document.getElementById("str");
                a.onclick = function() {
                    if (a.innerHTML == '查看详情') {
                        //alert();
                        showDiv();
                    } else {
                        hideDiv();
                    }
                }

                function showDiv() {
                    document.getElementById("hpn").style.display = "block";
                    document.getElementById("str").innerHTML = "收起";
                    document.getElementById("str").href = "javascript:hideDiv()";
                }

                function hideDiv() {
                    document.getElementById("hpn").style.display = "none";
                    document.getElementById("str").innerHTML = "查看详情";
                    document.getElementById("str").href = "javascript:showDiv()";
                }
            }
        </script>
</body>

</html>