[jQuery笔记] 小图片切换

@lianst  October 31, 2018

图片切换示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>小图片切换示例</title>
        <script src="js/jquery-1.8.3.min.js"></script>
        <style>
        //定义img标签的宽度和高度
        img{
            width:500px;
            height:300px
        }
        </style>
        <!-- 如果js写在body上面,就需要在code前面加上$(function(){CODE};) -->
        <script>
            $(function(){
                var i=1
                $("#btn").click(function(){
                    //console.log("aaa");
                    //操作图片,prop(属性,值);prop() 方法设置或返回被选元素的属性和值。
                    $("img").prop("src","img/"+i+".jpg");
                    i++;
                    if(i>5)i=1;
                });
            })
        </script>
    </head>
    <body>
        <img src="img/5.jpg">
        <button type="button" id="btn">切换图片</button>
        <!-- <script>
            var i=1
            $("#btn").click(function(){
                //console.log("aaa");
                $("img").prop("src","img/"+i+".jpg");
                i++;
                if(i>5)i=1;
            });
        </script> -->
    </body>
</html>

添加新评论