前端学习——js运用与网页完善

1. 学习内容

在完成对js基础语法学习后,学习了js在web中的运用,掌握对BOM、DOM的操作,实现网页动态交互效果。

2. 成果展示

实现轮播图、滑行、渐入渐出等等,动态效果。

window.addEventListener("load", function (){
//    轮播图获取元素
    var rignt=document.querySelector('.next');
    var left=document.querySelector('.prev');
    var banner=document.querySelector('.banner');
    var all=document.querySelector('.all');
    var allwidth=all.offsetWidth;
    banner.addEventListener('mouseenter',function (){
        //改变属性
        left.style.display='block';
        rignt.style.display='block';
        //停止自动播放的定时器并将定时器清空
        clearInterval(timer);
        timer=null;
    })
    banner.addEventListener('mouseleave',function (){
        left.style.display='none';
        rignt.style.display='none';
        timer=setInterval(function () {
            //手动调用点击事件
            rignt.click();
        },2000);
    })


    //动态生成小方块,几个图几个方块
    var one_ul=banner.querySelector('#one');
    var ol=banner.querySelector('ol');
    for (var i=0;i < one_ul.children.length;i++){
       //创建li
       var li=document.createElement('li');
       //设置方块索引号属性
        li.setAttribute('index',i);
       //将li插入ol中
       ol.appendChild(li);
       //生成后绑定点击事件
        li.addEventListener('click',function (){
            //清除其他li current类名
            for (var i=0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            //设置当前li类名
            this.className='current';
            //点击方块,移动图片,移动one_ul,获取图片长

            //点击某个li 获取对应索引号
            var index=this.getAttribute('index');
            //点击某个li,将索引号给num控制图片,给circle控制方块
            num=index;
            circle=index;
            animate(one_ul,-index*allwidth);
        })
    }
    //将第一个方块变白
    ol.children[0].className='current';

    //克隆第一张图片放到最后面
    var first=one_ul.children[0].cloneNode(true);
    one_ul.appendChild(first);

    //添加左右按钮,滚动图片
    var num=0;
    var circle=0;//控制方块播放
    var flag=true;//节流阀,避免连续点击图片切换过快


    //右侧按钮
    rignt.addEventListener('click',function () {
      if (flag){
          flag=false;//关闭节流阀
          //如果走到了最后复制的照片,one_ull快速复原,left改为0
          if (num == one_ul.children.length - 1) {
              one_ul.style.left = 0;
              num = 0;
          }
          num++;
          animate(one_ul, -num * allwidth,function () {
              flag=true;//待一次动画完成,打开节流阀
          });
          //点击按钮,方块跟随变化
          circle++;
          //如果circle=方块个数,则走到了克隆的这张图 将其复原
          if (circle == ol.children.length) {
              circle = 0;
          }
          changeCurrent();
      }
    }) ;



    //左侧按钮
    left.addEventListener('click',function () {
      if (flag){
          flag=false;
          //如果走到了最后复制的照片,one_ul快速复原,left改为0
          if (num==0){
              num=one_ul.children.length-1;
              one_ul.style.left=-num*allwidth+'px';
          }
          num--;
          animate(one_ul,-num*allwidth,function () {
              flag=true;
          });
          //点击按钮,方块跟随变化
          circle--;
          //如果circle=方块个数,则走到了克隆的这张图 将其复原
          if (circle<0){
              circle=ol.children.length-1;
          }
          changeCurrent();
      }
    });

        function changeCurrent() {
            //先清除其他方块current类名
            for (var i=0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            //将当前方块添加current类名
            ol.children[circle].className='current';
        }

        //自动播放
    var timer=setInterval(function () {
        //手动调用点击事件
        rignt.click();
    },2000);
 );