簡單的HTML圖片瀏覽功能

可以做成一個簡單的在線相冊,只要把圖片放到images目錄,文件名按1-N命名,改一下代碼中的圖片總張數,就可以正常運行.

<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<script src=”js/jquery-1.7.2.min.js”></script>
<script>
$(function() {
var now = 1;
var p = “images/”;
var page=1;

$(‘#p’).click(function(){
now = now – 1;
if (now == 1) {
$(‘#p’).text(“”);

}
else {
$(‘#p’).text(“Pre”);
$(‘#n’).text(“Next”);
}

$(‘#pic’).attr(“src”,”images/” + now + “.jpg”);
});

$(‘#n’).click(function(){
now = now + 1;
if (now == 4) {
$(‘#n’).text(“”);

}
else {
$(‘#n’).text(“Next”);
$(‘#p’).text(“Pre”);
}

$(‘#pic’).attr(“src”,”images/” + now + “.jpg”);
});

$(‘#pic’).attr(“src”,”images/” + now + “.jpg”);

});
</script>
<body>
<div style=”width:980px;height:600px;overflow:scroll;”>
<img id=”pic” style=”width:1500px;” />
</div>
<table width=”50%”>
<tr>
<td>
<a id=”p” href=”#”></a>
</td>
<td>
<a id=”n” href=”#”>Next</a>
</td>
</tr>
</table>

</body>
</html>

 

此条目发表在Program分类目录,贴了, 标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>