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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
