实现细节：
1.jQuery中的ajax()方法通过HTTP请求加载远程数据，该方法是jQuery底层AJAX实现
2.AJAX——核心XMLHttpRequest对象
3.success请求之后调用，传入返回后的数据，以及包含成功代码的数据
4.$.ajax({
type:"GET",
url:"网站地址",
dataType:"json",
success:function(msg){
alert(msg);
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态轮播</title>
<style>
*{
margin:0px;
padding: 0px;
}
#slider{
width: 720px;
height:480px;
position:relative;
margin:100px auto;
overflow: hidden;
}
#slider ul li{
float:left;
list-style: none;
}
#slider ul li img{
width:720px;
height: 480px;
}
.arrow{
display: none;
}
#slider .arrow .arr{
top:200px;
position:absolute;
width: 50px;
height: 50px;
font-size: 35px;
font-family: "黑体";
line-height: 50px;
background-color:rgba(0, 0, 0, 0.3); /*让背景透明文本不受影响*/
color: #fff;
text-align:center;
font-weight: bold;
cursor:pointer;
}
#slider .arrow .arrow-left{
left:10px;
}
#slider .arrow .arrow-right{
right:10px;
}
#slider:hover .arrow{ /*鼠标悬停时arrow属性 对应的标签显示*/
display: block;
}
</style>
</head>
<script src="jquery1.7.2.js"></script>
<body>
<div id="slider">
<div id="img">
<ul class="list">
</ul>
</div>
<div class="arrow">
<span class="arr arrow-left"><</span>
<span class="arr arrow-right">></span>
</div>
</div>
<script>
//通过ajax请求，获取轮播图数据
$.ajax({
type:"GET",
url:"http://www.barteam.cn:8086/sliderlist",
success:function(msg){
// msg=JSON.parse(msg);
console.log(msg);
var length=msg.Data.length;
// console.log(length);
for(var i=0;i<length;i++){
var li =document.createElement("li");
li.innerHTML ='<img src=" '+ msg.Data[i].img_url +'">';
$("#slider #img .list").append(li);
}
var $lis=$("#slider #img .list li")
var count=0;
console.log($lis);
var liLen=$lis.length;
console.log(liLen);
$('.arrow-left').click(function(){
count++;
count=count<liLen ? count:0;
$lis.eq(count).fadeIn().siblings().fadeOut();//fadeIn(),fadeOut()为淡入，淡出效果，eq()为筛选第几个
})
$(".arrow-right").on('click',function(){
count--;
count=count>=0 ? count:liLen-1;
$lis.eq(count).fadeIn().siblings().fadeOut(); //fadeIn(),fadeOut()为淡入，淡出效果
})
}
})
</script>
</body>
</html>
for(var i=0;i<length;i++){
var li =document.createElement("li");
li.innerHTML ='<img src=" '+ msg.Data[i].img_url +'">';
$("#slider #img .list").append(li);
}
也可以将以上代码改为：
var data=msg.Data;
data.forEach(function(el,i){
console.log(el.img_url);
$("#slider #img ul").append('<li><img src="' +el.img_url +'">' +'</li>')
})
效果：
