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" alt=""></li>
<li><img src="images/big2.jpg" alt=""></li>
<li><img src="images/big3.jpg" alt=""></li>
<li> <img src="images/big4.jpg" alt=""></li>
<li> <img src="images/big5.jpg" alt=""></li>
<li> <img src="images/big6.jpg" alt=""></li>
<li> <img src="images/big7.jpg" alt=""></li>
<li> <img src="images/big8.jpg" alt=""></li>
<li> <img src="images/big9.jpg" alt=""></li>
</ul>
<div class="gray">
<a href="javascript:;"><img src="images/big1.jpg" alt="" class="img"></a>
<a href="javascript:;"><img src="images/slider-left.png" alt="" class="pre"></a>
<a href="javascript:;"><img src="images/slider-right.png" alt="" 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{
100%;
}
ul li{
list-style: none;
}
.pic{
max- 1920px;
80%;
margin: 0 auto;
}
.pic li{
33.33333%;
display: block;
float: left;
}
.pic img{
84%;
padding:2%;
margin: 4%;
box-shadow: 0.2vh 0.2vh 8vh rgb(152, 87, 133);
}
.gray{
position: fixed;
left: 0;
top:0;/**/
0;
100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
.img{
position: absolute;
50%;
padding: 1%;
background-color: #fff;
left:25%;
top: 50%;
}
.pre{
position: absolute;
3%;
left: 20%;
padding: 1%;
background-color: #fff;
top: 50%;
box-sizing: border-box;
}
.next{
position: absolute;
3%;
left: 80%;
padding: 1%;
background-color: #fff;
top: 50%;
box-sizing: border-box;
}