JavaScript-项目实战（优学网-ajax请求数据渲染页面+登录注册表单正则）

优学网项目简介

• 优学网项目主要分为首页+登录注册页+视频播放页内容项目模仿网页
• 使用html+css实现基本页面布局，完成ajax请求数据进行页面渲染以及表单正则验证的项目练习。
• 项目源码链接

一、首页

(一) 、轮播图模块

1、图片轮播–定时器

1. 通过ajax请求图片json数据， JSON.parse()将获取的数据转成js格式数据
2. 获取每一张图片、每一个小圆点–for循环
3. 初始化页面样式，将图片数据添加进 ul，将小圆点span加入p
4. 设置lunBoUl的宽度=图片宽度*图片张数
5. 轮播图–每隔一段时间切换图片，当到最后一张后返回第一张

//轮播图--每隔一段时间切换图片，当到最后一张后返回第一张
   var n = 0; //下标变量存储当前是第几张图片,第一张图片下标为0
   var timer = setInterval(function () {
   
   n++;
   //ul left移动
   //第一张图   0    0*1317
   //  二张     1   -1*1317
   //  三张图   2   -2*1317
   //图片数组arr,为实现无缝轮播再添加一个第一张图片，最后一张图=第一张图
   if (n >= arr.length + 1) {
   
       n = 0;
       lunBoUl.style.left = 0;
   }
   jsKu.move(lunBoUl, 'left', 60, -n * 1317); //lunBoUl为要移动的元素，left移动改变的值,step每一步走多少像素,移动的最终位置
   //遍历小圆点
   for (var i = 0; i < lunBoSpans.length; i++) {
   
       lunBoSpans[i].className = '';//小圆点初始样式设为空
   }//再设置当前小圆点的样式
   lunBoSpans[n == arr.length ? 0 : n].className = 'active';
   }, 2000); //每隔2秒轮播一张图
  }

2、鼠标滑入滑出事件

1. 当鼠标移入div时，停止图片轮播，鼠标移出div，开启定时器图片轮播
2. 设置定时器唯一标识符–用于清除定时器

//当鼠标移入div时，停止图片轮播，鼠标移出div，开启定时器图片轮播
   lunBoDiv.onmouseenter = function () {
   
       clearInterval(timer);//鼠标滑入-关闭定时器
   }
   lunBoDiv.onmouseleave = function () {
   //鼠标滑出--开启图片轮播
       timer = setInterval(function () {
   
           n++;//无缝轮播：最后一张图与第一张图片相同
       if (n >= arr.length + 1) {
   
           n = 0;//若图片轮播到最后一张图时，让n为0回到第一张图
           lunBoUl.style.left = 0;//图片ul的left值设为0
       }
       jsKu.move(lunBoUl, 'left', 60, -n * 1317);
      //遍历小圆点
       for (var i = 0; i < lunBoSpans.length; i++) {
   
           lunBoSpans[i].className = '';//小圆点初始样式设为空
       }//再设置当前小圆点的样式
       lunBoSpans[n == arr.length ? 0 : n].className = 'active';
       }, 2000); //每隔2秒轮播一张图
   }

3、左右箭头事件

1. 左箭头：点击左箭头显示上一张图片，第一张图片的上一张图片是最后一张图片

//左键头事件
   lunBoButtons[0].onclick = function () {
   
       n--;
       if (n < 0) {
   
           n = arr.length - 1; //arr.length=5第一张图片的上一张图片是最后一张图片
           jsKu.move(lunBoUl, 'left', 130, -n * 1317);
       }else {
   
           jsKu.move(lunBoUl, 'left', 60, -n * 1317);
       }
       //遍历小圆点--排他处理--设置当前小圆点样式
       for (var i = 0; i < lunBoSpans.length; i++) {
   
           lunBoSpans[i].className = '';//小圆点初始样式设为空
       }//再设置当前小圆点的样式
       lunBoSpans[n == arr.length ? 0 : n].className = 'active';
   }

2. 右箭头：点击右箭头显示下一张图片，最后一张图片的下一张图片是第一张图片

 //右箭头事件
   lunBoButtons[1].onclick = function () {
   
       n++;
       if (n > arr.length - 1) {
    //最后一张图片的下一张图片是第一张图片
           n = 0; //arr.length=5第一张图片的上一张图片是最后一张图片                    
           jsKu.move(lunBoUl, 'left', 130, -n * 1317);
      } else {
   
           jsKu.move(lunBoUl, 'left', 60, -n * 1317);
      }
       //遍历小圆点--排他处理--设置当前小圆点样式
       for (var i = 0; i < lunBoSpans.length; i++) {
   
           lunBoSpans[i].className = '';//小圆点初始样式设为空
       }//再设置当前小圆点的样式
       lunBoSpans[n == arr.length ? 0 : n].className = 'active';
   }

4、小圆点点击事件

1. 点击每个小圆点可对应显示图片
2. 小圆点的样式设置要进行排它处理–即所有小圆点样式初始为空，再设置当