<div class="codetitle"> <span><a style="CURSOR: pointer" data="19771" class="copybut" id="copybut19771" onclick="doCopy('code19771')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code19771"> <br> <br> <br> <br><title></title> <br><style type="text/css"> <BR>#mydiv{ position:absolute; width:500px; height:400px; top:50%; left:50%; margin-top:-200px; margin-left:-290px; } <BR>img{ width:480px; height:380px;} <BR></style> <br><script src="jquery-1.9.1.js" type="text/javascript"></script> <br><script src="Jquery1.7.js" type="text/javascript"></script> <br><script type="text/javascript"> <BR>$(function () { <BR>var array = [1, 2, 3, 4, 5, 6]; <BR>var count = 0; <BR>//后退 <BR>$('#Button1').click(function () { <BR>if (count > 0) { <BR>count--; <BR>$('img').attr('src', 'images/' + array[count] + '.jpg'); <BR>} <BR>}) <BR>//前进 <BR>$('#Button2').click(function () { <BR>if (count < 5) { <BR>count++; <BR>$('img').attr('src', 'images/' + array[count] + '.jpg'); <BR>} <BR>}) <BR>}) <BR></script> <br> <br> <br><div id="mydiv"> <br><table><tr> <td><input id="Button1" type="button" value="<"></td> <td><img src="images/1.jpg" alt="基于jQuery实现图片的前进与后退功能_jquery" ></td> <td><input id="Button2" type="button" value=">"></td> </tr></table> <br> </div> <br> <br> <br> </div> <br>效果如下： <br><img src="http://files.jb51.net/file_images/article/201304/20130424160448.jpg?201332416515" alt="基于jQuery实现图片的前进与后退功能_jquery" >
