项目-大剑网页

这个网页第一部分是一个轮播图，中间正文部分则是由6个<div>和一段名言组成，页脚则对文字运用了阴影效果。整个页面的背景图片被固定住后不会随着滚动条的滚动而变化。

轮播图

实现轮播图的方法有好几种，这里选用的是数组的方法。
1.将所有图片都存放在数组imgArr中，并在html中存放第一张图片，以便js获取元素；
2.声明一个变量num，初始值为0。它的作用是充当数组imgArr的索引。
3.点击左侧轮播导航，图片向左滑动。当滑动到第一张图片时，再次点击则显示最后一张图片。因此，每次单击左侧轮播导航都会让num减1，直到num<0，此时将最后一张图片的索引赋值给num。
4.单击右侧导航，图片向右滑动。当滑动到最后一张图片时，再次点击则显示第一张图片。这里num的值每单击一次都会增加1，直到num的值大于最后一张图片的索引，此时将将第一张图片的索引赋值给num。

<div>列表

通过改变正文的6块<div>的外边距使得他们呈对称样式。
最后一块<div>中包含了6张图片，每张图片都在鼠标悬浮时增加了盒子阴影。除此之外，该<div>还设置了overflow-y : scroll属性，用于容纳图片集。

HTML

<div id="container">    
    <p id="top_text">Claymore</p>
    <div id="text_box">
        <p>奇迹不是乞求来的，而是靠我们创造的</p>
        <hr>
        <p id="claymore">Claymore</p>
    </div>
    <div id="buttons">
        <button id="prev">上一页</button>
        <button id="next">下一页</button>
    </div>        
    <div id="img_box">
        <img id="img1" class="img" src="E:\前端\Claymore\iamges\1.jpg">
    </div>
    <div id="charactor1">
        <img src="E:\前端\Claymore\iamges\5.jpg">
        <div class="main_character">
            <p>Claymore</p>
            <hr>
            <p>克蕾雅</p>
            <a href="http://www.baike.com/wiki/%E5%85%8B%E8%95%BE%E9%9B%85" target="blank" class="alink">Learn More</a>
        </div>
    </div>
    <div id="charactor2">
        <img src="E:\前端\Claymore\iamges\6.jpg">
        <div class="main_character">
            <p>Claymore</p>
            <hr>
            <p>迪妮莎</p>
            <a href="http://claymore.baike.com/article-82328.html" target="blank" class="alink">Learn More</a>
        </div>
    </div>
    <div id="middle">
        <p>Miracles are not begging, they are created by us.</p>
        <hr>
        <p>Claymore</p>
    </div>           
    <div class="introduce">
        <p class="title">故事简介</p>
        <p>大陆上怪物横行危害人类，而为了对抗它们某神秘组织制造出了一些半人半妖的妖怪猎人，并称之为“大剑”。大剑由于本身就是混血，所以即是妖怪的死对头但同时也不为人类所信任。而她们的宿命也很讽刺，随着不断的战斗她们的身体也会逐渐向妖怪转变，到最后只有两条路可走，要么，在变成妖怪之前让同伴杀死自己。要么，就让自己的妖力完全觉醒，成为最强大的怪物“觉醒者”而与昔日的同伴为敌……</p>
        <a href="https://baike.baidu.com/item/%E5%A4%A7%E5%89%91/71060" target="blank" class="alink">Learn More</a>
    </div>
    <div class="introduce" id="charactor">
        <p class="title">角色阵容</p>            
        <p>导演: 田中洋之</p>
        <p>编剧: 小林靖子</p>
        <p>主演: 桑岛法子 / 高城元气 / 朴璐美 / 关智一 / 武田华 / 久川绫 / 井上喜久子 / 丰口惠美</p>
        <p>类型: 剧情 / 动作 / 动画 / 奇幻 / 冒险</p>
        <a href="https://wapbaike.baidu.com/item/%E5%A4%A7%E5%89%91/587763" target="blank" class="alink">Learn More</a>
    </div>
    <div class="introduce">
        <p class="title">音乐制作</p>
        <p>音响监督：本田保则</p>
        <p>音乐：宅见将典</p>
        <p>音响效果：长谷川卓也（サウンドボックス）</p>
        <p>音乐制作人：千石一成</p>
        <p>音乐协力：日本テレビ音楽、バップ、エイベックス・エンタテインメント</p>
        <a href="https://music.163.com/#/playlist?id=521424570" target="blank" class="alink">Learn More</a>
    </div>
    <div class="introduce"  id="animation">
        <p class="title">类似大剑的优秀动漫</p> 
        <div id="ibox">           
            <div class="box">
                <a href="https://movie.douban.com/subject/1758491/" target="blank"><img src="E:\前端\Claymore\iamges\7.jpg"></a>
            </div>
            <div class="box">
                <a href="https://baike.baidu.com/item/%E5%A6%96%E7%B2%BE%E7%9A%84%E6%97%8B%E5%BE%8B/44335" target="blank"><img src="E:\前端\Claymore\iamges\8.jpg"></a>                 
            </div>
            <div class="box">
                <a href="https://movie.douban.com/subject/4312800/" target="blank"><img src="E:\前端\Claymore\iamges\9.jpg"></a>
            </div>
            <div class="box">
                <a href="http://www.bing.com/knows/search?q=%E4%B8%9C%E4%BA%AC%E9%A3%9F%E5%B0%B8%E9%AC%BC&kt=zh-cn" target="blank"><img src="E:\前端\Claymore\iamges\10.jpg"></a>
            </div>
            <div class="box">
                <a href="https://movie.douban.com/subject/24748787/" target="blank"><img src="E:\前端\Claymore\iamges\11.jpg"></a>
            </div>
            <div class="box">
                <a href="https://movie.douban.com/subject/3136371/" target="blank"><img src="E:\前端\Claymore\iamges\12.jpg"></a>
            </div> 
        </div>       
    </div>
    <footer>
        为了已经失去的东西 以及 为了不想失去的东西而战
    </footer>
</div>

CSS

*{
    margin: 0px;
}
#container{
    border: 1px solid lightcyan;
    margin-left: 20px;
    margin-right: auto;
    background-image: url("E:/前端/Claymore/iamges/01.jpg");
    background-attachment: fixed;
}
/*轮播样式*/
#img_box{    
    padding-left: 10px;
    width: 1300px;
    height: 800px;
    overflow: hidden;
    margin-bottom: 20px;
}
.img{
    width: 100%;
    height: auto;
    margin: 10px 10px 10px 10px;
}
#top_text{
    position: absolute;
    top: 10px;
    right: 40px;
    color: white;
    font-size: 32px;
    font-weight: bold;
}
#text_box{
    position: absolute;
    top: 350px;
    left: 390px;
    font-size: 36px;
    color: lightsteelblue;
}
#claymore{
    text-align: center;
}

#prev,#next{
    position: absolute;
    top: 400px;    
    outline: none;
    opacity: 0.7;
}
#prev{
    left: 41px;
}
#next{  
    right: 18px;
}
/*主角界面*/
#charactor1 img,#charactor2 img{
    width: 500px;
    height: auto;
}
/*若为第五、六张图片设置float属性，则后面的div元素将不会独占下一行*/
#charactor1,#charactor2{
    display: inline-block;
    border: 1px solid #cccccc;
    box-shadow: 0px 0px 5px #cccccc;
    margin-left: 50px;
    background-color: lightgray;
    padding: 5px;
    border-radius: 5px;
}
#charactor2{
    margin-left: 200px;    
}
.main_character p{
    text-align: center;
    margin-top: 10px;
}
#charactor1 hr,#charactor2 hr{
    width: 100px;
    margin-left: 200px;
    margin-top: 10px;
}
.alink{
    text-decoration: none;
    text-align: center;
    border: 1px solid #cccccc;
    box-shadow: 0px 0px 5px tan;
    margin-left: 200px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    width: 100px;
}
.alink:visited{
    color:blueviolet;
}
.alink:hover{
    color: snow;
}
#middle,footer{
    text-align: center;
    height: 100px;
    background-color: grey;
    margin: 30px auto;
    width: 1300px;   
}
#middle hr{
    width: 500px;
    margin-left: 400px;
}
#middle p,footer{
    line-height: 50px;
    letter-spacing: 2px;
    font-weight: bold;
}
footer{
    font-size: 1.8em;
    height: 100px;
    padding-top: 40px;
    margin-bottom: 20px;
    text-shadow: 5px 5px 5px rgb(68, 108, 167);
}
.title{
    text-align: center;
}
/*四个介绍页面样式*/
.introduce{
    display: inline-block;
    background-color: lightgray;
    width: 500px;
    height: 300px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0px 0px 5px #cccccc;
    line-height: 2;
    margin-left: 50px;
    margin-bottom:10px;
    /*让两个div以第一行对齐，而非默认值baseline(最后一行)对齐*/
    vertical-align: top;
}
#charactor,#animation{
    margin-left: 200px;
}
#charactor a{
    margin-top: 40px;
}
/*动画列表*/
#animation{
    overflow-y: scroll;   
}
#ibox{
    padding-left: 20px;
}
.box{
    display: inline-block;
    width: 30%;
    height: 200px;
    border: 1px solid lightyellow;
    
    padding: 2px;    
    overflow: hidden;
}
.box img{
    width: 100%;
    height: auto;
    
}
.box:hover{
    box-shadow: 5px 5px 10px rgb(130, 80, 170);
}

JS

window.onload=function(){
    //这里路径中的斜杠必须是反斜杠，且数组是小括号，而不是中括号
    var imgArr=new Array("E:/前端/Claymore/iamges/1.jpg","E:/前端/Claymore/iamges/2.jpg","E:/前端/Claymore/iamges/3.jpg","E:/前端/Claymore/iamges/4.jpg");
    var oimg=document.getElementById("img1");
    var oprev=document.getElementById("prev");
    var onext=document.getElementById("next");
    var num=0;
    function img_change(){
        oimg.src=imgArr[num];
     
    }
    oprev.onclick=function(){
        num--;
        if(num<0){
            num=imgArr.length-1;
        };
        img_change();
    }
    onext.onclick=function(){
        num++;
        if(num>imgArr.length-1){
            num=0;
        };
        img_change();
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,020评论 3赞 119
  • 关于原生JS的AJAX
    前段时间，我学习了AJAX的相关基础内容，虽然其中还有许多未明白的地方，但是已经可以进行最基本的使用的了，所以写下...
    大春春阅读 2,593评论 0赞 1
  • 泰康之家·楚园医养社区 七成被订
    武汉"超级养老会所"明年开放 高端医养社区七成被订 长江网5月28日讯(长江日报记者徐锦博)武汉首个国际标准高品质...
    TechMax阅读 1,203评论 0赞 0
  • Markdown 常用语法
    1. 标题 2. 无序列表: 列表1 列表2 列表3 3. 有序列表 列表1 列表2 列表3 4. 链接和图片 百...
    简简天天阅读 233评论 0赞 1