//自己根据图片路径设置好，img/main/index.jpg 为主页显示的9张
//img/show/index/index.jpg 分别为每一张主页后面现实的图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
100%;
height: 100%;
overflow: hidden;
}
ul li {
list-style: none;
}
#picture{
100%;
height: 100%;
background: url(img/bg2.jpg)no-repeat;
overflow: hidden;
position: relative;
}
#list{
750px;
height: 560px;
margin: 180px auto;
}
#list li{
230px;
height: 159px;
border: 5px solid #fff;
float: left;
margin: 5px;
box-shadow: 0 0 20px #fff;
cursor: pointer;
}
#list li img{
230px;
height: 159px;
display: block;
}
#cover{
100%;
height: 100%;
background:rgba(0 , 0 , 0 , .8);
position: absolute;
top: 0;
left: 0;
display: none;
}
#bigPic{
display: none;
}
#bigList{
650px;
height: 450px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -240px;
margin-left: -325px;
}
#bigList li{
650px;
height: 450px;
position: absolute;
top: 0;
left: 0;
border: 5px solid #fff;
}
#bigList li img{
650px;
height: 450px;
position: absolute;
top: 0;
left: 0;
}
#bigPic a{
text-decoration: none;
display: block;
50px;
height: 70px;
font-size: 60px;
text-align: center;
line-height: 70px;
font-weight: bold;
color: #c5c5c5;
position: absolute;
top: 50%;
margin-top: -35px;
border-radius: 10px;
box-shadow: 0 0 10px #fff;
}
#left{
left: 100px;
}
#right{
right: 100px;
}
</style>
</head>
<body>
<div id="picture">
<ul id="list">
<li><img src="img/main/1.jpg"/></li>
<li><img src="img/main/2.jpg"/></li>
<li><img src="img/main/3.jpg"/></li>
<li><img src="img/main/4.jpg"/></li>
<li><img src="img/main/5.jpg"/></li>
<li><img src="img/main/6.jpg"/></li>
<li><img src="img/main/7.jpg"/></li>
<li><img src="img/main/8.jpg"/></li>
<li><img src="img/main/9.jpg"/></li>
</ul>
<div id="cover"></div>
<div id="bigPic">
<ul id="bigList">
<li><img src="img/show/0/1.jpg"/></li>
<li><img src="img/show/0/2.jpg"/></li>
<li><img src="img/show/0/3.jpg"/></li>
<li><img src="img/show/0/4.jpg"/></li>
<li><img src="img/show/0/5.jpg"/></li>
</ul>
<a href="###" id="left"><</a>
<a href="###" id="right">></a>
</div>
</div>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var tab = new Tab();
tab.click();
tab.rightclick();
tab.leftclick();
tab.close();
}
function Tab(){
this.list = document.getElementById("list");
this.listLi = this.list.getElementsByTagName('li');
this.bigList = document.getElementById("bigList");
this.bigListLi = this.bigList.getElementsByTagName('li');
this.bigListImg = this.bigList.getElementsByTagName('img');
this.cover = document.getElementById('cover');
this.bigPic = document.getElementById("bigPic");
this.right = document.getElementById("right");
this.left = document.getElementById("left");
}
Tab.prototype.click = function(){
var This = this;
for (var i=0;i<this.listLi.length;i++) {
this.listLi[i].index = i;
this.listLi[i].onclick = function(){
$(This.cover).fadeIn(500)
$(This.bigPic).fadeIn(500)
for (var j=0;j<This.bigListLi.length;j++) {
This.bigListImg[j].src ='img/show/'+this.index+'/'+(j+1)+'.jpg';
};
}
}
}
Tab.prototype.rightclick = function(){
var This = this;
this.right.onclick = function(){
This.last = This.bigList.lastElementChild || This.bigList.lastChild;
$(This.last).animate({'left':'650px'},500,function(){
$(this).animate({'left':0},500)
This.bigList.insertBefore( this, This.bigListLi[0])
})
$(This.bigList).animate({'left':'40%'},500,function(){
$(this).animate({'left':'50%'},500)
})
}
}
Tab.prototype.leftclick = function(){
var This = this;
this.left.onclick = function(){
This.first = This.bigList.firstElementChild||This.bigList.firstChild;
$(This.first).animate({'left':'-650px'},500,function(){
$(this).animate({'left':0},500);
This.bigList.appendChild( this )
})
$(This.bigList).animate({'left':'60%'},500,function(){
$(this).animate({'left':'50%'},500)
})
}
}
Tab.prototype.close = function(){
var This = this;
this.cover.onclick = function(){
$(This.cover).fadeOut(500);
$(This.bigPic).fadeOut(500);
}
}
</script>
</body>
</html>