• 查看图片前进后退效果


    <!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;
                500px;
                height: 400px;
                top: 50%;
                left: 50%;
                margin-top: -200px;
                margin-left: -290px;
            }
            img
            {
                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>

  • 相关阅读:
    PCMan:Ubuntu下的最快的文件管理器
    Android 不需要root权限也可卸载系统应用的adb命令
    Directory Opus --- 布局灵活的文件管理,支持文件预览,强烈推荐
    Charles 抓包网络接口请求 修改请求参数 修改返回数据
    做直播app功能测试,怎么开展?
    Python字典内置函数和方法
    pycharm2020.3安装破解版激活教程 附:无限重置时间插件(mac windows linux)
    if not用法
    nvm安装与使用
    Python批量安装.Txt文件中的类库包
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3038568.html
Copyright © 2020-2023  润新知