广告轮播图的前后台实现

这个广告轮播系统是老师布置的前端实训的一个结课作业。

前端：

• 图片在广告位进行有时间性的轮播。
• 在两侧有前进和后退的操作。
• 在下面有几张轮播图的小框框，用来显示图片的进度，
• 点击小框框还可以立刻跳转到该图片。

后台：

• 用node.js 创建一个服务器，在浏览器上访问该地址就可以跳出内容。
• 有后台向前端发送图片的信息。前台根据后台发送ajax数据构建动态内容。
• 后台的数据由数据库获取。
• 数据库的信息发生改变，前台的显示效果也会动态发生改变。

项目运行效果录像说明2.gif

---

• 如何根据后台穿过来的数据进行动态构建网页

   var advLen =advInfoItem.length; //获取数组的长度
  
    //根据传过来的数组的长度给imgList赋值
    $(".imgList").css("width",advLen*730+"px");
  
    //给底部文字区添加li标签
    for(var i=0;i<advLen;i++){
        $(".bg+ul").append("<li></li>");
    }
    //给li添加文字advNote
    $(".bg+ul").find("li").each(function (i) {
        $(this).text(advInfoItem[i].advNote);
    })
  
    for(var i=0;i<advLen;i++){
        $(".indexList").append("<li></li>");
    }
  
    $(".indexList").find("li").each(function (i) {
        $(this).text(i+1);
    })
  
    for(var i=0;i<advLen;i++){
        $(".imgList").append("<li><a><img></a></li>");
    }
    $("