這個網(wǎng)頁第一部分是一個輪播圖，中間正文部分則是由6個<div>和一段名言組成隧出，頁腳則對文字運用了陰影效果颊亮。整個頁面的背景圖片被固定住后不會隨著滾動條的滾動而變化。
輪播圖
實現(xiàn)輪播圖的方法有好幾種拂铡，這里選用的是數(shù)組的方法壹无。
1.將所有圖片都存放在數(shù)組imgArr中，并在html中存放第一張圖片感帅，以便js獲取元素格遭；
2.聲明一個變量num，初始值為0留瞳。它的作用是充當(dāng)數(shù)組imgArr的索引呵俏。
3.點擊左側(cè)輪播導(dǎo)航伺绽，圖片向左滑動既忆。當(dāng)滑動到第一張圖片時铅祸，再次點擊則顯示最后一張圖片。因此硬梁，每次單擊左側(cè)輪播導(dǎo)航都會讓num減1前硫，直到num<0，此時將最后一張圖片的索引賦值給num荧止。
4.單擊右側(cè)導(dǎo)航屹电，圖片向右滑動。當(dāng)滑動到最后一張圖片時跃巡，再次點擊則顯示第一張圖片危号。這里num的值每單擊一次都會增加1，直到num的值大于最后一張圖片的索引素邪，此時將將第一張圖片的索引賦值給num外莲。
<div>列表
通過改變正文的6塊<div>的外邊距使得他們呈對稱樣式。
最后一塊<div>中包含了6張圖片，每張圖片都在鼠標(biāo)懸浮時增加了盒子陰影偷线。除此之外磨确，該<div>還設(shè)置了overflow-y : scroll屬性，用于容納圖片集声邦。
HTML
<div id="container">
<p id="top_text">Claymore</p>
<div id="text_box">
<p>奇跡不是乞求來的乏奥，而是靠我們創(chuàng)造的</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 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 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>大陸上怪物橫行危害人類，而為了對抗它們某神秘組織制造出了一些半人半妖的妖怪獵人亥曹，并稱之為“大劍”英融。大劍由于本身就是混血，所以即是妖怪的死對頭但同時也不為人類所信任歇式。而她們的宿命也很諷刺，隨著不斷的戰(zhàn)斗她們的身體也會逐漸向妖怪轉(zhuǎn)變胡野，到最后只有兩條路可走材失，要么，在變成妖怪之前讓同伴殺死自己硫豆。要么龙巨，就讓自己的妖力完全覺醒，成為最強大的怪物“覺醒者”而與昔日的同伴為敵……</p>
<a target="blank" class="alink">Learn More</a>
</div>
<div class="introduce" id="charactor">
<p class="title">角色陣容</p>
<p>導(dǎo)演: 田中洋之</p>
<p>編劇: 小林靖子</p>
<p>主演: 桑島法子 / 高城元氣 / 樸璐美 / 關(guān)智一 / 武田華 / 久川綾 / 井上喜久子 / 豐口惠美</p>
<p>類型: 劇情 / 動作 / 動畫 / 奇幻 / 冒險</p>
<a target="blank" class="alink">Learn More</a>
</div>
<div class="introduce">
<p class="title">音樂制作</p>
<p>音響監(jiān)督：本田保則</p>
<p>音樂：宅見將典</p>
<p>音響效果：長谷川卓也（サウンドボックス）</p>
<p>音樂制作人：千石一成</p>
<p>音樂協(xié)力：日本テレビ音楽熊响、バップ旨别、エイベックス?エンタテインメント</p>
<a target="blank" class="alink">Learn More</a>
</div>
<div class="introduce" id="animation">
<p class="title">類似大劍的優(yōu)秀動漫</p>
<div id="ibox">
<div class="box">
<a target="blank"><img src="E:\前端\Claymore\iamges\7.jpg"></a>
</div>
<div class="box">
<a target="blank"><img src="E:\前端\Claymore\iamges\8.jpg"></a>
</div>
<div class="box">
<a target="blank"><img src="E:\前端\Claymore\iamges\9.jpg"></a>
</div>
<div class="box">
<a target="blank"><img src="E:\前端\Claymore\iamges\10.jpg"></a>
</div>
<div class="box">
<a target="blank"><img src="E:\前端\Claymore\iamges\11.jpg"></a>
</div>
<div class="box">
<a target="blank"><img src="E:\前端\Claymore\iamges\12.jpg"></a>
</div>
</div>
</div>
<footer>
為了已經(jīng)失去的東西 以及 為了不想失去的東西而戰(zhàn)
</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;
}
/*若為第五、六張圖片設(shè)置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以第一行對齊秸弛，而非默認(rèn)值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(){
//這里路徑中的斜杠必須是反斜杠，且數(shù)組是小括號洪碳，而不是中括號
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();
}
}
