[jQuery笔记] 小图片切换

行者

发布于 2019-12-10 10:22:26

3.3K0

发布于 2019-12-10 10:22:26

文章被收录于专栏：运维技术迷

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

jquery