dedecms文章图片集做成翻页效果

<div class="info-zi">

{dede:productimagelist}

<img src="[field:imgsrc/]" />

{/dede:productimagelist}
<div style="text-align: center; width: 100%; height: 100px;">
<div style="width: 80%; margin: 0 auto; line-height: 100px;"><button id="pageup" style="background: #FFF; border: 1px solid #e8e8e8; color: #666; padding: 10px 30px; margin-right: 5px;">上一页</button>
<button id="pagedown" style="background: #FFF; border: 1px solid #e8e8e8; color: #666; padding: 10px 30px; margin-left: 5px;">下一页</button></div>
</div>
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$('.info-zi p').not(':first').hide();
$('.info-zi p img').not(':last').click(function(){
$(this).parent().hide();
$(this).parent().next().show();
})
$('#pageup').click(function(){
var p_img = $('.info-zi p:visible');
var p_index = $('.info-zi p img').index($('.info-zi p img:visible'));
if(p_index!=0){
p_img.hide();
p_img.prev().show();
}

})

$('#pagedown').click(function(){

var p_length = $('.info-zi p img').length;
var p_index = $('.info-zi p img').index($('.info-zi p img:visible'));
var p_img = $('.info-zi p:visible');
if((p_length-1)!=p_index){

p_img.hide();
p_img.next().show();
}
})
})
</script>