50 lines
1.3 KiB
HTML
50 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="css/swiper.css">
|
|
<link rel="stylesheet" href="css/seeBigPicture.css">
|
|
<style>
|
|
.pics{
|
|
overflow: hidden;
|
|
}
|
|
.pics a{
|
|
display: block;
|
|
float: left;
|
|
margin: 10px 20px 10px;
|
|
}
|
|
.pics img{
|
|
display: block;
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="pics" id="picGroup">
|
|
<a href="javascript:;"><img src="images/1.jpg" alt=""></a>
|
|
<a href="javascript:;"><img src="images/2.jpg" alt=""></a>
|
|
<a href="javascript:;"><img src="images/3.jpg" alt=""></a>
|
|
</div>
|
|
</body>
|
|
<script src="js/jquery-1.9.1.min.js"></script>
|
|
<script src="js/fastClick.js"></script>
|
|
<script src="js/swiper.js"></script>
|
|
<script src="js/seeBigPicture.js"></script>
|
|
<script>
|
|
FastClick.attach(document.body);
|
|
$('#picGroup a').click(function () {
|
|
var index = $(this).index()
|
|
$('#picGroup').seeBigPicture({
|
|
initialSlide:index,
|
|
showButton:true,//是否显示左右按钮
|
|
showBottomPic:true,//是否将所有图片显示在底部
|
|
canSlide:true//是否可以左右滑动切换
|
|
})
|
|
})
|
|
|
|
</script>
|
|
</html>
|