2021-06-22——ajax编写banner图方法（小白笔记第二天）

2023-11-24 17:56:58
banner图片的ajax的动态调取数据显示方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bannerjq封装</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/ajax.js"></script>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<style>
    #www {
        width: 100%;
        height: auto;
        position: relative;
    }
    
    #www img {
        width: 300px;
        height: 200px;
        background-color: pink;
        float: left;
    }
    
    .item img {
        display: block;
        width: 1000px;
        height: 300px;
    }
</style>

<body>
    <!-- <div id="www">
        <img src="../../images/1.jpg">
    </div> -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <!-- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li> -->
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <!-- <div class="item active">
                <img src="../../images/1.jpg" alt="...">

            </div> -->
            <!-- <div class="item">
                <img src="../../images/2.jpg" alt="...">
            </div>
            <div class="item">
                <img src="../../images/2.jpg" alt="...">
            </div> -->


        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <script>
        $(function() {
                $.ajax({
                    url: "http://www.qhdlink-student.top/student/banner.php",
                    type: 'post',
                    dataType: 'json',
                    // data: 'username=ljj&userpwd=12345678&userclass=53&type=2',
                    data: {
                        username: "ljj",
                        userpwd: 12345678,
                        userclass: 53,
                        type: 2
                    },
                    success: function(data) {
                        var str = '';
                        var ol = '';
                        $.each(data, function(i, v) {
                            if (i == 0) {
                                str += '<div class="item active"><img src = "http://www.qhdlink-student.top/' + v.path_banner + '" ></div>'
                                ol += ' <li data-target="#carousel-example-generic" data-slide-to="' + v.id_banner + '" class="active"></li>'
                            } else {
                                str += '<div class="item"><img src = "http://www.qhdlink-student.top/' + v.path_banner + '" ></div>'
                                ol += ' <li data-target="#carousel-example-generic" data-slide-to="' + v.id_banner + '"></li>'
                            }
                            // var $i = $(".carousel-inner").children("item").eq(i).html = '<img src = "http://www.qhdlink-student.top/' + v.path_banner + '" >'

                            // str += '<img src = "http://www.qhdlink-student.top/' + v.path_banner + '" >';
                            // console.log(v.path_coach);
                            console.log(v);
                        })


                        $(".carousel-inner").append($(str))
                        $(".carousel-indicators").append($(ol))
                    }


                })
            })
            // getData(dd, "post", "http://www.qhdlink-student.top/student/banner.php", true, postmsg)
    </script>

</body>

</html>
码农公寓

banner图片的ajax的动态调取数据显示方法

相关文章
