分页展示图片

Love The Way You Lie 2022-09-27 06:50 196阅读 0赞

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

<!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>

运行的结果截图：

![Center][]

[Center]: /images/20220708/462f4cc661334b34b3ae80abb2dd91b8.png