web前端开发课设 html5前端网页设计中国传统文化介绍

介绍中国传统文化html5 网页页面设计（每一个主页开头都设置有滚动图片功能）首先是主页面index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-

半盏流年、

10397人浏览 · 2021-07-16 22:51:08

半盏流年、 · 2021-07-16 22:51:08 发布

介绍中国传统文化html5 网页页面设计（每一个主页开头都设置有滚动图片功能）

首先是主页面index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="header">
        <div class="nav">
            <div class="nav1">中国传统文化</div>
            <a href="./index.html" class="frist">首页</a>
            <a href="ctjr.html">传统节日</a>
            <a href="">中国戏剧</a>
            <a href="">中国建筑</a>
            <a href="">汉字文化</a>
            <a href="">地域文化</a>
            <a href="">传统中医</a>
            <a href="">美食文化</a>
            <a href="">关于我们</a>
        </div>
    </div>
    <script src="./js/jquery-3.4.1.min.js"></script>
<script>
  $('.nav a').hover(function(){
    $(this).addClass('frist').siblings().removeClass('frist');
  })
</script>
<div class="imgBox">
    <img class="img-slide img1" src="./images/shouye/bar1.png" alt="1">
    <img class="img-slide img2" src="./images/shouye/bar2.png" alt="2">
</div>
</body>
<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,2000);
</script>
<div class="w">
    弘扬中国传统文化
</div>
<div class="s">
    <div class="s1">
        <img src="./images/shouye/bar3.jpg" alt="">
    </div>
    <div class="s2">
        <img src="./images/shouye/1.jpg" alt="">
    </div>
</div>
<div class="w">
    中国文化孝道
</div>
<div class="s">
    <div class="s1">
        <img src="./images/shouye/3.jpg" alt="">
    </div>
    <div class="s2">
        <img src="./images/shouye/6.jpg" alt="">
    </div>
</div>
<div class="w">
    中国品德文化
</div>
<div class="s">
    <div class="s1">
        <img src="./images/shouye/4.jpg" alt="">
    </div>
    <div class="s2">
        <img src="./images/shouye/5.png" alt="">
    </div>
</div>
</body>
</html>

首页图片（长截图）：
在这里插入图片描述