20160614 html5学习代码（图册）
Posted 唯一的liaoliao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20160614 html5学习代码（图册）相关的知识，希望对你有一定的参考价值。
index.html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图册</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/SuperSlide.js"></script>
</head>
<body>
<ul class="pic">
<li> <img src="images/big1.jpg" ></li>
<li><img src="images/big2.jpg" ></li>
<li><img src="images/big3.jpg" ></li>
<li> <img src="images/big4.jpg" ></li>
<li> <img src="images/big5.jpg" ></li>
<li> <img src="images/big6.jpg" ></li>
<li> <img src="images/big7.jpg" ></li>
<li> <img src="images/big8.jpg" ></li>
<li> <img src="images/big9.jpg" ></li>
</ul>
<div class="gray">
<a href="javascript:;"><img src="images/big1.jpg" class="img"></a>
<a href="javascript:;"><img src="images/slider-left.png" class="pre"></a>
<a href="javascript:;"><img src="images/slider-right.png" class="next"></a>
</div>
<script>
var imgh=$(‘.gray .img‘).height();
var h=imgh/2;
$(‘ .img‘).css(‘margin-top‘,-h+‘px‘);
$(‘.gray‘).hide();
var index=0;
$(‘.pic li img‘).click(function(e){
e.stopPropagation();
$(‘.gray‘).show();
var s = $(this).attr(‘src‘);
$(‘.gray .img‘).attr(‘src‘,s);
var index=$(this).index()+1;
})
$(‘.gray‘).click(function(){
$(‘.gray‘).hide();
})
$(‘.next‘).click(function(e){
e.stopPropagation();
index++;
if(index>9){
index=1; }
$(‘.gray .img‘).attr(‘src‘,‘images/big‘+index+‘.jpg‘);
})
$(‘.pre‘).click(function(e){
e.stopPropagation();
index--;
if(index<1){
index=9; }
$(‘.gray .img‘).attr(‘src‘,‘images/big‘+index+‘.jpg‘);
})
</script>
<!--<script>
jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
</script> -->
</body>
</html>
index.css部分
@charset "utf-8";
*{margin: 0;padding: 0};
html{
height: 100%;
}
body{
width: 100%;
}
ul li{
list-style: none;
}
.pic{
max-width: 1920px;
width: 80%;
margin: 0 auto;
}
.pic li{
width: 33.33333%;
display: block;
float: left;
}
.pic img{
width: 84%;
padding:2%;
margin: 4%;
box-shadow: 0.2vh 0.2vh 8vh rgb(152, 87, 133);
}
.gray{
position: fixed;
left: 0;
top:0;/**/
width: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
.img{
position: absolute;
width: 50%;
padding: 1%;
background-color: #fff;
left:25%;
top: 50%;
}
.pre{
position: absolute;
width: 3%;
left: 20%;
padding: 1%;
background-color: #fff;
top: 50%;
box-sizing: border-box;
}
.next{
position: absolute;
width: 3%;
left: 80%;
padding: 1%;
background-color: #fff;
top: 50%;
box-sizing: border-box;
}
以上是关于20160614 html5学习代码（图册）的主要内容，如果未能解决你的问题，请参考以下文章