zoukankan      html  css  js  c++  java
  • 单一图片切换jquery

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
            <style>
                .for{overflow: hidden; 100%; zoom: 1;}
                .for ul{list-style: none;}
                .for ul li{ float: left; margin: 5px;}
                .for ul li img{display: block;}
                .btn{ 100px; height: 45px; text-align: center; line-height: 45px; background: blue; color: #fff;
                    -webkit-user-select:none;

       -moz-user-select:none;

       -ms-user-select:none;

       user-select:none;
                }
            </style>

    <div class="for">
                <ul>
                    <li><img id="m1"  src="images/prt_1.jpg"/></li>
                    <li><img id="m2"  src="images/prt_1.jpg"/></li>

                </ul>
            
            </div>
            <div class="btn" onclick="forTo()">换菜按钮</div>

        </body>
        <script>
            var m1="images/prt_1.jpg"
             var m2="images/prt_2.jpg"
              var m3="images/prt_3.jpg"
               var m4="images/prt_4.jpg"
               var i=0
               var a = [m1,m2,m3,m4]

    // jquery型
            $("#m1").click(function(){
                i++;
                if(i>a.length){
                    i=1;
                }
                $(this).prop("src","images/prt_"+i+".jpg");
            });

       // 方法型
                function forTo(){
                i++;
                if(i>a.length){
                    i=1;
                }
                $('#m2').prop("src","images/prt_"+i+".jpg");
            };
        </script>

  • 相关阅读:
    Oracle statspack 安装及使用
    MyEclipse 快捷键
    ORACLE EXP/IMP的使用详解
    PyCharm如何配置断点调试功能
    ftl-server静态资源服务器
    JS计算两个日期时间差,天 小时 分 秒格式
    readystatechange
    js实现input中输入数字,控制每四位加一个空格(银行卡号格式)
    javascript“类”与继承总结和回顾
    Javascript根据指定下标或对象删除数组元素
  • 原文地址:https://www.cnblogs.com/gerry/p/9650684.html
Copyright © 2011-2022 走看看