实现细节：
1.jQuery中的ajax()方法通过HTTP请求加载远程数据，该方法是jQuery底层AJAX实现2.AJAX——核心XMLHttpRequest对象3.success请求之后调用，传入返回后的数据，以及包含成功代码的数据4.$.ajax({type:"GET",//请求类型url:"网站地址",//请求的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{ 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({type:"GET",url:"http://www.barteam.cn:8086/sliderlist",success:function(msg){console.log(msg);var length=msg.Data.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();})$(".arrow-right").on('click',function(){count--;count=count>=0 ? count:liLen-1;$lis.eq(count).fadeIn().siblings().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>')})
效果：
