使用jQuery实现图片分页展示-优快云博客

该博客介绍了一种简单的图片分页展示方法，利用jQuery和HTML实现。通过提供的代码示例，可以实现用户在页面上查看图片时的分页浏览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面的是关于较为简单的图片进行分页展示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="file:///C|/Users/Administrator/Desktop/jquery-2.1.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var $pic=$('.img a');
var length=$pic.length;
$pic.hide();
var next=$pic.eq(0);
next.show();
var pagenumbers=$('<div class="pagenumbers"></div>');
for(i=0;i<length;i++){
$('<span class="page">'+(i+1)+'</span>').appendTo(pagenumbers);
}
pagenumbers.insertBefore(next);
$('span').click(function(event){
$pic.hide();
next=$pic.eq($(this).text()-1);
next.show();
});

});
</script>
<style type="text/css">
.img{
width:550px;
margin:0 auto;
margin-top:70px;
}
.page:hover{
opacity:0.9;
background-color:yellow;
cursor:pointer;

}
.page{
display:inline-block;
opacity:0.5;
width:20px;
height:20px;
background-color:#CCC;
border-radius:10px;
text-align:center;
margin:5px 5px;
}
</style>
</head>

<body>
<div class="img">
<a href="#"><img src="1.png" width="500px" height="500px" /></a>
<a href="#"><img src="2.png" width="500px" height="500px" /></a>
<a href="#"><img src="3.png" width="500px" height="500px" /></a>
<a href="#"><img src="4.png" width="500px" height="500px" /></a>
<a href="#"><img src="5.png" width="500px" height="500px" /></a>
</div>
</body>

</html>

运行的结果截图：