前端学习考核总结

        这周是学习了js后的考核，对于用到的知识进行以下总结       

                   我们在写网页的时候经常会遇到这样一个可以平滑滚动到顶部的返回按钮

这时候只需要在css中添加这样一行代码就可以实现平滑滚动至顶部的效果了

 

                有时候对于一个图片需要使它变暗，这时候添加遮罩层可以直线这样的效果，当然还有更简单的方法那就是直接调整图片亮度即可实现

                对于轮播图的实现（这里是一个五张图片的），首先需要获取元素，这里不在描述

             
            //点击小方块,切换图片
            for (let i = 0; i < btns.length; i++) {
                btns[i].onmouseenter = function () {
                    clear();//鼠标移入小方块时清除定时器
                    index = i;
                    list.style.left = -index * （这里图片宽度多少就设置多少） + "px";
                    redBtns(index);
                };
                btns[i].onmouseleave = function () {
                    start();//鼠标离开方块时开启定时器
                }
            }
            // 启动定时器
            function start() {
                time = setInterval(function () {
                    rightMove();
                }, 3000);
            }
              // 清除定时器
            function clear() {
                clearInterval(time);
            }

 //点击右按钮往右走
            rightButton.onclick = function () {
                rightMove();
            }
            //点击左按钮往左走
            leftButton.onclick = function () {
                leftMove();
            }
            //启动定时器,自动播放
            start();
            // 向左移动
            function leftMove() {
                //当index为-1时,设为4回到最后一张图,
                index--;
                if (index === -1) {
                    index = 4
                }
                list.style.left = -index *（这里图片宽度多少就设置多少） + "px";
                redBtns(index);//小方块的滚动
            }
             // 向右移动
            function rightMove() {
                index++;
                //当index为5时,设为0回到第一张图,
                if (index === 5) {
                    index = 0;
                }
                list.style.left = -index *（这里图片宽度多少就设置多少） + "px";

                       //这里是为了让图片在转换时有一个滑动效果

                redBtns(index);//小方块动态移动
            }
            function redBtns(index) {
                for (let i = 0; i < btns.length; i++) {
                    if (i === index) {
                        btns[i].className = "××× ";
                    } else {
                        btns[i].className = "××× ";
                    }                   //这里需要在css中设置两个盒子，对于小方块的状态进行转换
                }
            }
        }

当然如果不需要滑动效果的话

 这个没有滑动效果。