CSS+JavaScript 复原网页(轮播图)

最新推荐文章于 2024-05-17 14:32:46 发布

海豹突击队队长啊

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量74

点赞数 1

文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/qq_62480857/article/details/134616050

版权

web作业，加了轮播图

实验要求

以 PSD 文件作为原始素材，通过切片、HTML+CSS 的形式将网站首页进行复原。

结果展示

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>毛泽东画像 毛体书法展</title>
        <meta name="keywords" content="毛泽东画像，毛体书法展">
        <meta name="description" content="毛泽东画像,毛体书法展">
        <LINK href="mzd.css" rel="stylesheet">
        

    </head>
    <body>
            <div class="background-image">
                <div class="center-container">
                    <!--header-->
                    <div class="header">
                        <img src="head_img.png" alt="毛泽东头像" class="header_image">
                        <img src="毛泽东画像 毛体书法展.png" alt="毛泽东画像 毛体书法展" class="header_image">
                    </div>

                    <!--viewport-->
                    <div class="viewport">
                        <img src="图层 5 副本 4.png" alt="鱼纹" class="鱼纹">
                        <img src="矩形 4.png" alt="红矩形" class="红矩形">
                        <div class="view_text">
                            <a href="file:///C:/Users/captain1307/Desktop/Web/css/mzd.html"><img src="首页_.png" alt="首页" ></a>
                            <a href="https://baike.baidu.com/item/%E6%AF%9B%E6%B3%BD%E4%B8%9C/113835"><img src="前言导航条_.png" alt="前言"></a>
                            <a href="https://news.csu.edu.cn/info/1002/156204.htm"><img src="领导讲话_.png" alt="领导讲话"></a>
                            <a href="https://baike.baidu.com/pic/%E8%87%A7%E5%BF%97%E7%A5%A5/2151521/1891696833/cf1b9d16fdfaaf5124c0038a8e5494eef01f7ae0?fr=lemma&fromModule=lemma_content-image#aid=1891696833&pic=cf1b9d16fdfaaf5124c0038a8e5494eef01f7ae0"><img src="作品展示_.png" alt="作品展示"></a>

                        </div>

                        <div class="display">
                            <div class="display_container">
                                <img src="左箭头.png" alt="前一张" class="left arrow">

                                <div class="imgList">
                                    <div class="imglist">
                                        <img src="image (5).png" alt="">
                                        <img src="image (1).png" alt="">
                                        <img src="image (2).png" alt="">
                                        <img src="image (3).png" alt="">
                                        <img src="image (4).png" alt="">
                                        <img src="image (6).png" alt="">
                                    </div>
                                </div>

                                <img src="Shadow .png" alt="" class="Shadow">                                   
                                <img src="右箭头.png" alt="后一张" class="right arrow">

                            </div>
                          
                            <ul class="dots">
                                <li class="dot active" data-n="0"></li>
                                <li class="dot" data-n="1"></li>
                                <li class="dot" data-n="2"></li>
                                <li class="dot" data-n="3"></li>
                                <li class="dot" data-n="4"></li>
                                <li class="dot" data-n="5"></li>

                            </ul> 

                        </div>

                        
                    </div>
                    <!--作者介绍-->
                    <div class="作家介绍_坨">
                        <img src="作者 介绍.png" alt="作者介绍" class="作者介绍字">
                        <img src="墨点_1.png" alt="墨点" class="墨点">
                        
                    </div>
                    <div class="作者介绍展板">
                        <div class="介绍">
                            <p class="t_name">臧志祥<span id="拼音"> (zāng zhì xiáng)</span></p>
                            <p class="introduction">臧志良，号志笔，字志良，中国当代画家、书法家、策划师。中国书画艺术家协会理事，湖南省益阳装饰设计院创始人之一。<br><span class="em_2"></span>1952年生于湖南省益阳市，自幼习画，六十年代起攻人物画. 近年来其作品次被日本、香港、台湾、新加坡等东南亚国家和地区的机构及知名人士收藏。擅长描绘人物、性格表现得淋漓尽致。如《青年毛泽东》《毛主席在陕西》《一代伟人》表现领袖和蔼慈样的神态，《孙中山》刻画了国父忧国忧民的神情和坚毅的目光。先生是文艺多面手，国画、书法、篆刻、诗文等得心应手，清雅逸奇，超脱境界，个性飞扬，其书法作品以古朴厚重见长。草书运转自如，于规矩之夕。</p>
                        </div>
                        <img src="藏志祥.png" alt="藏志祥" class="藏志祥">
                    </div>

                    <!--前言-->
                    <div class="前言">
                        <div class="前言_字">
                            <img src="字体背景.png" alt="前言" class="字体背景">
                            <img src="前言.png" alt="前言_字" class="前言字">
                        </div>

                        <div class="前言_展板">
                            <p>毛主席作为我们的开国领袖，是我们党、人民军队、共和国卓越的缔造者，为实现中华民族的独立和振兴、中国人民的解放和幸福，作出了彪炳史册的巨大贡献。为深切缅怀我们的伟大领袖毛主席，特举办毛主席画像、毛体书法作品展。这是对我们每一个人特别是党员干部一次深刻的红色革命传统教育，一次广泛的爱国主义教育，一次新形势下的政治思想教育，一次深入学习毛泽东思想、落实科学发展观的实践活动。</p>
                            <a href="https://baike.baidu.com/item/%E6%AF%9B%E6%B3%BD%E4%B8%9C/113835" title="more" class="more more1">[more]</a>
                        </div>

                        

                    </div>

                    <!--领导讲话-->
                    <div class="领导讲话">
                        <div class="领导讲话_字">
                            <img src="字体背景.png" alt="领导讲话" class="字体背景">
                            <img src="领导讲话.png" alt="领导讲话_字" class="领导讲话字">
                        </div>

                        <div class="领导讲话_展板">
                            <div class="讲话展板_领导">
                                <img src="李建成.png" alt="领导照片1" class="领导照片">
                                <div class="领导介绍">
                                    <div class="title">
                                        <p>李建成 &nbsp;</p>
                                        <p>中南大学的神</p>
                                    </div>
                                    <p class="text">善于学习,用于实践, 提升睹始知终、见微知著的能力。善于学习,用于实践, 提升睹始知终、见微知著的能力</p>
                                </div>
                            </div>

                            <div class="讲话展板_领导">
                                <img src="李建成.png" alt="领导照片2" class="领导照片">
                                <div class="领导介绍">
                                    <div class="title">
                                        <p>李建成 &nbsp;</p>
                                        <p>中南大学的救校主</p>
                                    </div>
                                    <p class="text">善于学习,用于实践, 提升睹始知终、见微知著的能力。善于学习,用于实践, 提升睹始知终、见微知著的能力</p>
                                </div>
                            </div>

                            <a href="https://news.csu.edu.cn/info/1002/156204.htm" title="more" class="more more2">[more]</a>
                            
                        </div>

                    </div>




                    <!--bottom-->
                    <div class="t_footer">
                        <p>
                            <a href="https://www.csu.edu.cn/index.htm">关于我们</a>
                            <span>|</span><a href="https://dag.csu.edu.cn/xsfw/fwzn.htm" title="服务条款"> 服务条款</a>
                            <span>|</span><a href="https://www.csu.edu.cn/info/1050/5129.htm" title="广告服务"> 广告服务</a>
                            <span>|</span><a href="http://www.csusp.com/index?locale=zh_CN" title="创新园招聘"> 创新园招聘</a>
                            <span>|</span><a href="https://www.csu.edu.cn/index/xndh.htm" title="网站导航"> 网站导航</a>
                            <span>|</span><a href="https://dag.csu.edu.cn/fgbz/fgbz.htm" title="版权所有"> 版权所有</a>
                        </p>
                        <p><span>联系地址:中南大学校本部升华前楼204&nbsp;&nbsp;&nbsp;</span><span>联系电话:0731-88836377&nbsp;&nbsp;&nbsp;</span><span>备案号:湘ICP备120035642</span></p>    
                    </div>
                </div>
            </div>
    </body>
    <script>
        // 获取左右按钮、图片列表
        let oLeft = document.querySelector(".left");
        let oRight = document.querySelector(".right");
        let oImgList = document.querySelector(".imglist");

        if (oLeft) {
            console.log("左箭头元素成功获取");
        } else {
            console.error("未能获取左箭头元素");
        }

        if (oRight) {
            console.log("右箭头元素成功获取");
        } else {
            console.error("未能获取右箭头元素");
        }

        // 克隆第一张图片
        let clonefirstImg = oImgList.firstElementChild.cloneNode();
        // 添加至图片列表末尾
        oImgList.appendChild(clonefirstImg);

        // 图片索引 
        let index = 0;

        // 设置函数节流锁
        let lock = true;
        function handleRightBtn() {
            if (!lock) return;
            index++;
            oImgList.style.left = index * -700 + "px";
            // 过渡
            oImgList.style.transition = "0.5s ease";

            if (index === 6) {
                index = 0;
                setTimeout(() => {
                    oImgList.style.left = 0;
                    // 取消过渡 切换第一张
                    oImgList.style.transition = "none";
                }, 500);
                }

                // 设置小圆点高亮
                setCircles();
                // 关锁
                lock = false;
                setTimeout(() => {
                    lock = true;
                }, 500);
            }
        // 右按钮
        oRight.addEventListener("click", handleRightBtn);

        // 左按钮  切换到假图然后拉到真实最后一张图
        oLeft.addEventListener("click", () => {
            if (!lock) return;
            index--;
            if (index === -1) {
                oImgList.style.left = 6 * -700 + "px";
                oImgList.style.transition = "none";
                index = 5;
                setTimeout(() => {
                    oImgList.style.left = index * -700 + "px";
                    oImgList.style.transition = "0.5s ease";
                }, 0);
            } else {
                oImgList.style.left = index * -700 + "px";
            }

            // 设置小圆点的高亮
            setCircles();

            lock = false;
            setTimeout(() => {
                lock = true;
            }, 500);
        });

        // 获取小圆点
        const circles = document.querySelectorAll(".dot");

        // 小圆点高亮
        function setCircles() {
        for (let i = 0; i < circles.length; i++) {
            if (i === index) {
                circles[i].classList.add("active");
            } else {
                circles[i].classList.remove("active");
            }
        }
        }

        // 点击小圆点切换图片 使用事件代理
        const oCircle = document.querySelector(".dots");
        oCircle.addEventListener("click", (e) => {
        // 点击小圆点时
        if (e.target.nodeName.toLowerCase() === "li") {
            // 当前元素的data-n对应得值 和index一一对应
            const n = Number(e.target.getAttribute("data-n"));
            index = n;
            setCircles();
            oImgList.style.transition = "0.5s ease";
            oImgList.style.left = index * -700 + "px";
        }
        });

        // 自动轮播
        let autoplay = setInterval(handleRightBtn, 2000);
        const oWrap = document.querySelector(".imglist");
        // 移入停止轮播
        oWrap.addEventListener("mouseenter", () => {
            clearInterval(autoplay);
        });
        // 移出继续轮播
        oWrap.addEventListener("mouseleave", () => {
        // 设表先关
            clearInterval(autoplay);
            autoplay = setInterval(handleRightBtn, 2000);
        });

    </script>


</html>

body {
    margin: 0 ;
    overflow: auto;
    display: grid;
    place-items: center;
    min-height: 100vh;
    position: relative;

    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
.center-container {
    position: relative;  
    margin: 0 auto;
    width: 920px;
    display: grid;
    place-items: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;  
}

.background-image {
    position:absolute;
    top: 0;
    background-image: url('波纹大背景.png');
    background-position: center;

    background-attachment: fixed;
    background-color: #fbecd0;
    z-index: 0;
    margin: 0 auto;
    width: 1400px;
    height: 1700px;
}

.header{
    width:920px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    margin-top: 20px;
}

.header_image{
    height:196px;
}

.header-text{
    font-size: 80px;
    font-family: "草檀斋毛泽东字体";
    color: rgb(237, 28, 36);
    line-height: 1.125;
    text-align: center;
    position: absolute;
    left: 502.156px;
    top: 160.92px;
    width: 599px;
    height: 180px;
    z-index: 1;
}
.viewport{
    width:920px;  
    position: relative;
    align-items: center;
}
.鱼纹 {
    position: absolute;
    top:0;
    left: 0;
    background-image: url("图层 5 副本 4.png");
    opacity:0.3;
    height: 52px;
    z-index: 2;
  }

.红矩形 {
    background-color: #c83a2a;
    height: 56px;
    z-index: 3;
  }
.view_text{
    display: flex;
    position: absolute;
    justify-content: space-between;
    justify-content: space-around;
    width: 920px;
    align-items: center;
    top:0;
    left: 0;

    height: 56px;
    z-index: 4;
}
.display_container{
    display:grid;
    grid-template-columns: auto 1fr auto;
}
.display {
    display: grid;
    background-color: rgb(241, 242, 242);
    overflow: hidden;
    height: 450px;
    z-index: 1;
    place-items: center;
    margin:0 auto;
  }
ul{
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}
.imgList{
    display: flex;
    overflow: hidden;
    position: relative;
    justify-content: center;
    align-items: center;
    margin:0 auto;  
   
}
.imgList .imglist{
    top:40px;
    position: relative;
    
    width:700px;
    height: 305px;
    z-index: 10;
    transition: 0.5s ease;
    display: flex;

}
.imgList .imglist img{
    height: 305px;
    width: 700px;
    object-fit: fill ;

    flex-shrink: 0;
    z-index: 4;
}
.Shadow{
    grid-column: span 3;
    align-self: end;
    position: absolute;
    width: 1050px;
    top:143px;
    left:50%;
    transform: translateX(-50%);
    z-index:2;
    display: block;
    pointer-events: none;
}
.dots{
    display: flex;
    gap: 12px;
    z-index: 2;
    margin-top: 30px;
}
.dots li{
    width: 10px;
    height: 10px;
    border: 1px solid#b0afaf;
    background-color: #f1f2f2;
    border-radius: 50%;
    cursor: pointer;
}
.dots li.active {
    background-color: gray;
}

.arrow {
    position: relative;
    top: 45%;
    height: 70px;
    width: auto;

}
.arrow img{
    height: 60px;
    z-index: 5;
    cursor: pointer;
}
.left {
    left: -15px;
    justify-content: flex-start;
}

.right {
    right: -15px;
    justify-content: flex-end;
}




/* 作者介绍 */
.作者介绍_坨{
    position: relative;
    z-index: 13;
}
.墨点{
    margin-top: -90px;
    margin-left: -510px;
    position: absolute;
    height: 145px;
    z-index: 1;
}
.作者介绍字 {
    margin-top: -60px;
    margin-left: -460px;
    position: absolute;
    height: 75px; 

    z-index: 2;
}

.作者介绍展板{
    display: flex;
    width: 920px;   
    height: 265px;
}
.em_2{
    width: 2em;
    display: inline-block;
}
.介绍{
    background-color: #c83a2a;
    font-family: "SimHei";
    color: rgb(241, 242, 242);
    padding: 18px;
    text-align: left;
    align-items: center;
    flex-direction: column; 
}
#拼音{
    font-size: 14px;
    display: inline;
}
.t_name{
    font-size: 25px;
    margin-top: 38px;
    margin-bottom: 10px;
    z-index: 3;
}
.introduction{
    font-size: 14px;
    text-indent: 2em;
}

/*前言*/
.前言{
    padding: 20px;
}
.前言_字{
    position: relative;
}

.字体背景 {
    height: 62px;  
    display: block;
    z-index: 1;
}

.前言字 {
    position: absolute;
    height: 39px; 
    top:16px;
    left:22px;
    z-index: 2;
}
.前言_展板{
    position: relative;
    background-color:rgba(255, 255, 255,0.451);
    line-height:1.2;
    align-items: center;
    justify-content: center;
    width: 922px;
    height: 135px;
    display: flex;
    z-index: 1;
}
.前言_展板 p{

    font-size: 15px;
    font-family: "SimHei";
    color: rgb(35, 31, 32);
    width: 822.67px;
    text-align: left;
    text-indent: 2em;
}

.more{
    position: absolute;
    margin-left: 830px;
    color:#22201f;
}
.more1{
    margin-bottom:-90px;
}
.more2{
    margin-bottom: -130px;
}
/* 领导讲话 */
.领导讲话{
    padding: 20px;
}
.领导讲话_字{
    position: relative;
}

.领导讲话字 {
    position: absolute;
    height: 39px; 
    top:16px;
    left:22px;
    z-index: 1;
}
.领导讲话_展板{
    display: flex;
    align-items: center;
    background-color:rgba(255, 255, 255,0.451);
    line-height:1.2;
    justify-content: center;
    width: 922px;
    height: 181px;
    z-index: 2;
}
.讲话展板_领导{
    display: flex;
    height: 103px;
    margin: auto;
    align-items: center;
}
.领导介绍{
    position: relative;
    height: 125px;
    display: flex;
    flex-direction: column; 
    align-items: start;
    padding: 12px;
}
.title{
    display: flex;
    font-size: 18px;
    font-weight: 700;
    font-family: "SimHei";
    color:#22201f;
    line-height: 1.2;
    text-align: left;
    align-self: flex-start;
    margin:auto;
    margin: 0;
    padding: 0;
}
.text{
    margin-top: -15px;
    font-size: 15px;
    font-family: "SimHei";
    color: rgb(35, 31, 32);
    width: 230.11px;
    text-align: left;
}
.t_footer{
    padding: 0;
}
.t_footer p{
    font-size:18px; 
    text-align: center;
}
.t_footer a{
    color: #22201f;
}