广告轮播图的前后台实现

灰太狼 2022-06-02 08:29 171阅读 0赞

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

##### 前端： #####

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

##### 后台： #####

*  用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>");
          }
          $(".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对象，这个百度一查可以查到，后台的数据就已经解决好了。  
补充：如何将图片进行上传，这个是要补充学习的。