项目-大剑网页

这个网页第一部分是一个轮播图，中间正文部分则是由6个

和一段名言组成，页脚则对文字运用了阴影效果。整个页面的背景图片被固定住后不会随着滚动条的滚动而变化。

轮播图

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

列表

通过改变正文的6块

的外边距使得他们呈对称样式。
最后一块

中包含了6张图片，每张图片都在鼠标悬浮时增加了盒子阴影。除此之外，该

还设置了overflow-y : scroll属性，用于容纳图片集。

HTML

    
    
Claymore
    

        
奇迹不是乞求来的，而是靠我们创造的
        

        
Claymore
    
    

        上一页
        下一页
    
        
    

        
    
    

        
        

            
Claymore
            

            
克蕾雅
            Learn More
        
    
    

        
        

            
Claymore
            

            
迪妮莎
            Learn More
        
    
    

        
Miracles are not begging, they are created by us.
        

        
Claymore
    
           
    

        
故事简介
        
大陆上怪物横行危害人类，而为了对抗它们某神秘组织制造出了一些半人半妖的妖怪猎人，并称之为“大剑”。大剑由于本身就是混血，所以即是妖怪的死对头但同时也不为人类所信任。而她们的宿命也很讽刺，随着不断的战斗她们的身体也会逐渐向妖怪转变，到最后只有两条路可走，要么，在变成妖怪之前让同伴杀死自己。要么，就让自己的妖力完全觉醒，成为最强大的怪物“觉醒者”而与昔日的同伴为敌……
        Learn More
    
    

        
角色阵容
            
        
导演: 田中洋之
        
编剧: 小林靖子
        
主演: 桑岛法子 / 高城元气 / 朴璐美 / 关智一 / 武田华 / 久川绫 / 井上喜久子 / 丰口惠美
        
类型: 剧情 / 动作 / 动画 / 奇幻 / 冒险
        Learn More
    
    

        
音乐制作
        
音响监督：本田保则
        
音乐：宅见将典
        
音响效果：长谷川卓也（サウンドボックス）
        
音乐制作人：千石一成
        
音乐协力：日本テレビ音楽、バップ、エイベックス・エンタテインメント
        Learn More
    
    

        
类似大剑的优秀动漫
 
        
           
            

                
            
            

                                 
            
            

                
            
            

                
            
            

                
            
            

                
            
 
        
       
    
    

        为了已经失去的东西 以及 为了不想失去的东西而战
    

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();
    }
}