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>

  • 相关阅读:
    MyBatis源码分析-IDEA新建MyBatis源码工程
    MyBatis源码分析-SQL语句执行的完整流程
    揭开C++类中虚表的“神秘面纱”
    MyBatis源码分析-MyBatis初始化流程
    由一个多线程共享Integer类变量问题引起的。。。
    Java Web之Servlet技术
    Java内存模型与垃圾回收
    Java Web之会话技术
    Spring学习之第一个AOP程序
    Java Web之JSP技术
  • 原文地址:https://www.cnblogs.com/gerry/p/9650684.html
Copyright © 2011-2022 走看看