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

前端：

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

后台：

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

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

   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>");}$(".imgList").find("a").each(function (i) {$(this).attr("href",advInfoItem[i].advUrl);})$(".imgList").find("img").each(function (i) {$(this).attr({"src":"/images/"+advInfoItem[i].advImg,"title":advInfoItem[i].advNote});})
  

• 构建定时器进行图片轮播

  // 定时器自动变换2.5秒每次var autoChange = setInterval(function(){if(curIndex < imgLen-1){curIndex ++;}else{curIndex = 0;}//调用变换处理函数changeTo(curIndex);},2500);
  

• 左右两边进行翻页

  //左箭头滑入滑出事件处理$("#prev").hover(function(){//滑入清除定时器clearInterval(autoChange);},function(){//滑出则重置定时器autoChangeAgain();});//左箭头点击处理$("#prev").click(function(){//根据curIndex进行上一个图片处理curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);changeTo(curIndex);});$("#next").hover(function(){//滑入清除定时器clearInterval(autoChange);},function(){//滑出则重置定时器autoChangeAgain();});//右箭头点击处理$("#next").click(function(){curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;changeTo(curIndex);});
  

• 对右下角按钮index进行事件绑定处理等

   //对右下角按钮index进行事件绑定处理等$(".indexList").find("li").each(function(item){$(this).hover(function(){clearInterval(autoChange);changeTo(item);curIndex = item;},function(){autoChangeAgain();});});
  

• 清除定时器时候的重置定时器--封装

    //清除定时器时候的重置定时器--封装function autoChangeAgain(){autoChange = setInterval(function(){if(curIndex < imgLen-1){curIndex ++;}else{curIndex = 0;}//调用变换处理函数changeTo(curIndex);},2500);}
  

• 轮播的执行动作函数

   function changeTo(num){var goLeft = num * 730;$(".imgList").animate({left: "-" + goLeft + "px"},advInfoItem[curIndex].timeout);$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn"); //只有获得infoOn这个类才能显示$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");}
  

• 如何从后台获取数据

  var advInfoItem;$(document).ready(function () {$.getJSON('/loadAdvData',function (data) {console.log("load advinfos from server ok!");advInfoItem=data.advInfos;console.log( typeof advInfoItem);turnshow(advInfoItem);})setTimeout(function () {$.getJSON("/loadAdvData",function (data) {console.log("reload advinfos from server ok!");advInfoItem = data.advInfos;});},30000);});
  

• 如何从数据库中获取数据

   connection.query('SELECT * from turnadv', function (error, results, fields) {if (error) throw error;// console.log(results);//1.重要的是把结果集变成ajax类型var res = JSON.stringify(results);//2.进行拼接字符串，然后再传回数据var advInfoItems='{"advInfos":'+res+'}';console.log(advInfoItems);setTimeout(function () {response.writeHead("200","{'content-type':'application/json'}"); //MIME类型response.end(advInfoItems);},100);});
  }
  

代码历程

老师之前给过一些代码，是写如何进行轮播的，他的思路是在两个图片抽成一个整体，将第一张图片划出去后，就把它截断，然后在添加到后面，这样子又变成一个整体。这个思路是可以进行图片的轮播。但是也存在一些问题。
比如说，在左翻和右翻要如何做。
比如说，点击下面的小框框如何进行跳转。
这些通过剪切和添加似乎更加困难。

于是我想到了这些图片变成一把尺子，然后尺子在这条展位上进行来回切割，这样不就解决了轮播的效果。进行前翻和后翻也更加容易。
但是问题出现了，当到达第一张和最后一张的时候如何处理

     if(curIndex < imgLen-1){curIndex ++;}else{curIndex = 0;}

这一段就可以解决到达边界的问题。
再进行扩展，如何通过点击左翻图标进行左进，点击右翻，进行右进。

$("#prev").click(function(){//根据curIndex进行上一个图片处理curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);changeTo(curIndex);});$("#next").click(function(){curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;changeTo(curIndex);});

这样就可以进行左翻和右翻的操作了。又有新的扩展了。如何点击下面的小框框进行图片的跳转

    //对右下角按钮index进行事件绑定处理等$(".indexList").find("li").each(function(item){$(this).hover(function(){clearInterval(autoChange);changeTo(item);curIndex = item;},function(){autoChangeAgain();});});

这样就可以进行点击翻页的功能。但是又有一个问题。就是定时器的关闭和重启。先看如何做到的

  // 定时器自动变换2.5秒每次var autoChange = setInterval(function(){if(curIndex < imgLen-1){curIndex ++;}else{curIndex = 0;}//调用变换处理函数changeTo(curIndex);},2500);//清除定时器时候的重置定时器--封装function autoChangeAgain(){autoChange = setInterval(function(){if(curIndex < imgLen-1){curIndex ++;}else{curIndex = 0;}//调用变换处理函数changeTo(curIndex);},2500);}

看到这段代码就会觉得奇怪，定时器已经有一个函数了，为什么还有进行包装呢。

这里面就有一个坑了。

当你关掉一个定时器，然后想要再打开这个定时器似乎不可能。不知道是否跟单线程工作原理有关，你要把这个定时器进行再封装，然后就可以进行调用。
前端的工作都做好了，但是，数据要从后台获取，这个用到了老师给的代码。上面有提到如何从后台获取数据。
在这个过程中，遇到了一个bug，就是关于获取到的数据之后，后台debug可以看到这个数据，但是后面的函数却没有执行。console没有显示。这个整整耗费了一个晚上的时间。直到12点还是没有解决。问了同学还是没有人可以解决。到第二天早上结果打开莫名其妙的可以了。真的是折磨人啊。

不要跟代码犟，它能犟死你。

然后就是数据库的编写，这个过程比较简单，也很好实现，查查百度，基本都可以搞定，就是如何把从数据库得到的结果集变成ajax对象，这个百度一查可以查到，后台的数据就已经解决好了。
补充：如何将图片进行上传，这个是要补充学习的。