多图片实现上一张，下一张按钮功能DEMO
今天公司的前端同事要改一个网站的手机版，产品详细页面有多张图片，要添加上一下，下一张的按钮功能，特做了个DEMO给她。同时也分享一下，给有需要的朋友。
<!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>
</head>
<script src="/js/jquery.min.js"></script>
<script>
$(document).ready(function() {
var total = $(".demo img").size();
var cur_no = 0;
$(".prev").click(function(){
if(cur_no == 0)
return;
else{
$(".demo img").eq(cur_no).hide();
cur_no -= 1;
$(".demo img").eq(cur_no).show();
}
})
$(".next").click(function(){
if(cur_no == total-1)
return;
else{
$(".demo img").eq(cur_no).hide();
cur_no += 1;
$(".demo img").eq(cur_no).show();
}
})
})
</script>
<body>
<div class="demo">
<img src="img01.jpg" class="img" >
<img src="img02.jpg" class="img" style="display:none">
<img src="img03.jpg" class="img" style="display:none">
<img src="img04.jpg" class="img" style="display:none">
<img src="img05.jpg" class="img" style="display:none">
<img src="img06.jpg" class="img" style="display:none">
<img src="img07.jpg" class="img" style="display:none">
<img src="img08.jpg" class="img" style="display:none">
<img src="img09.jpg" class="img" style="display:none">
<img src="img10.jpg" class="img" style="display:none">
<a href="javascript:void(0)" class="prev" title="Prev">上一张</a>
<a href="javascript:void(0)" class="next" title="Next">下一张</a>
</div>
</body>
</html>
