单一图片切换jquery

Posted 2021-01-06 gerry

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <style>
            .for{overflow: hidden; width: 100%; zoom: 1;}
            .for ul{list-style: none;}
            .for ul li{ float: left; margin: 5px;}
            .for ul li img{display: block;}
            .btn{ width: 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>