前端一轮考核任务回顾（可做入门练手项目）

简介

整理文件时发现了当初大一下进工作室时的一轮考核项目，当时只学了前端一个月左右，代码写的有很多不足，但还是有点怀念故加以复盘和改进。此网页是介绍千与千寻的电影，页面设计和编写都由我完成，配乐也是自己演奏，可以用作网页设计等选修课的大作业。

视频演示

项目视频演示

页面部分展示

代码简述

1. 此网页主要用HTML+CSS，轮播图部分用了JS，并上传了手动实现轮播图的JS封装demo

2. js实现轮播图原理主要用动画函数封装（通过定时器 setInterval() 不断移动盒子位置，函数需要传递2个参数，动画对象和移动到的距离，还有一个回调函数可传可不传）+动态生成小圆圈并设置索引，点击某个小圆圈 ， 就让图片滚动（滚动的为装图片的ul） 小圆圈的索引号乘以图片宽度的距离，注意ul的宽度是图片宽度*（图片张数+1），因为最后一张图片的下一张要克隆成第一张图片来形成循环

3. 此网页第一版本的轮播图用的是css写的（其实也算不上轮播图，点击按钮跳到对应图片）
   只需将此部分代码去掉注释并注释<div class="swiper">部分代码即可查看，但并不推荐这样做轮播图，体验感不如js版本
   

4. 此网页顶部的旋转木马实现效果主要用CSS3的透视、旋转、动画属性，页面动画有做了一些兼容

5. 主要人物部分为flex布局，有一定的页面响应效果

6. 隐藏彩蛋主要是hover加css3新属性

此次考核已经过去两年，当初做出第一个属于自己的页面时那种成就感仍记忆犹新，希望后面也能继续带着对前端的热爱在这条路上越走越远，有兴趣的友友们可以去github下载此页面代码

下载地址

Github
轮播图的封装文件也一并上传了，记得下载的是tv分支，master分支是另一个页面考核