前进后退实现的前提是:images 文件夹下图片的命名是从 1~5.jpg 有规律的,感兴趣的朋友可以参考下哈,希望可以帮助到你
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
注:images 文件夹下图片的命名是从 1~5.jpg 有规律的
声明的 var array = [1, 2, 3, 4, 5]; 这个数组存放的是图片的名称
- <head>
- <title></title>
- <script src="Jquery1.7.js" type="text/javascript"></script>
- <style type="text/CSS">
- img
- {
- width: 200px;
- height: 200px;
- }
- </style>
- <script type="text/javascript">
- $(function () {
- var array = [1, 2, 3, 4, 5];
- var count = 0;
- $('#Button1').click(function () {
- if (count > 0) {
- count--;
- $('img').attr('src','images/'+array[count]+'.jpg');
- }
- })
- $('#Button2').click(function () {
- if (count <4) {
- count++;
- $('img').attr('src', 'images/' + array[count] + '.jpg');
- }
- })
- })
- </script>
- </head>
- <body>
- <table>
- <tr>
- <td>
- <input id="Button1" type="button" value="<" />
- </td>
- <td>
- <img src="images/1.jpg" />
- </td>
- <td>
- <input id="Button2" type="button" value=">" />
- </td>
- </tr>
- </table>
- </body>
- <!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>
- <title></title>
- <style type="text/css">
- #mydiv
- {
- position: absolute;
- width: 500px;
- height: 400px;
- top: 50%;
- left: 50%;
- margin-top: -200px;
- margin-left: -290px;
- }
- img
- {
- width: 480px;
- height: 380px;
- }
- </style>
- <script src="Jquery1.7.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function () {
- //第一种方法
- /*
- $('#btn1').toggle(function () { $('img').attr('src', 'images/1.jpg'); },
- function () { $('img').attr('src', 'images/2.jpg'); },
- function () { $('img').attr('src', 'images/3.jpg'); },
- function () { $('img').attr('src', 'images/4.jpg'); },
- function () { $('img').attr('src', 'images/5.jpg'); });
- $('#btn2').toggle(function () { $('img').attr('src', 'images/5.jpg'); },
- function () { $('img').attr('src', 'images/4.jpg'); },
- function () { $('img').attr('src', 'images/3.jpg'); },
- function () { $('img').attr('src', 'images/2.jpg'); },
- function () { $('img').attr('src', 'images/1.jpg'); });
- */
- //第二种方法
- var array = [1, 2, 3, 4, 5, 6];
- var count = 0;
- //后退
- $('#btn1').click(function () {
- if (count > 0) {
- count--;
- $('img').attr('src', 'images/' + array[count] + '.jpg');
- }
- })
- //前进
- $('#btn2').click(function () {
- if (count < 5) {
- count++;
- $('img').attr('src', 'images/' + array[count] + '.jpg');
- }
- })
- })
- </script>
- </head>
- <body>
- <div id="mydiv">
- <table>
- <tr>
- <td>
- <input id="btn1" type="button" value="<" />
- </td>
- <td>
- <img src="images/1.jpg" />
- </td>
- <td>
- <input id="btn2" type="button" value=">" />
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
来源: