• 查看图片前进后退效果


    <!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>

  • 相关阅读:
    Java + Element-UI 实现简单的树形菜单
    Spring Boot 日志
    SpringMVC入门
    vue 路由钩子函数 刷新当前路由
    使用vue 路由钩子函数 报错 Uncaught (in promise) undefined
    Webpac优化看文记录
    移动端长按复制记录
    Vue.js 运行机制全局概览浅读
    老异步问题了
    vue-lazyload的使用 图片懒加载
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3038568.html
Copyright © 2020-2023  润新知