超服贴!前端必修的项目练习之路

哇啦啦~大家好!
刚开始前端之路的老铁们,学了一定基础总是想找找项目来练练手。但是要么项目太大,要么项目代码太多一看头就大了,无从下手。为了大家更好的学习,提升前端学习兴趣。附上一个小项目练练手。千里之行,始于敲代码。每天一练,每次都有新收获 啦啦啦~。超服贴!前端必修的项目练习之路_第1张图片
这是本次的项目成果图!如果大家CSS学的好可以达到更优美的界面。
布局和样式不是我们总点说的地方直接附上代码图片
超服贴!前端必修的项目练习之路_第2张图片
超服贴!前端必修的项目练习之路_第3张图片
我们总点来说说实现这个功能的技术 主要使用到完美的jQuery jQuery很美 很简 很易 值得前端的每一位学习者去体会 话不多说 正式开始。
第一步 实现上一张,下一张按钮功能
超服贴!前端必修的项目练习之路_第4张图片
1.定义一个图片的名称(我用的是数字1,2,3,4)
定义全局变量 timer 下面定时器会用到
2.上一张,下一张按钮
通过判断 进入条件语句 通过attr()来修改图片的index 就实现了图片的变换 当到达最后一张 通过else语句 回到第一张
第二步 设置定时器
开启定时器 关闭定时器
超服贴!前端必修的项目练习之路_第5张图片
1.首先封装star函数
当自动播放到第5张 自动调回第1张
2.在调用setInterval(函数名,时间间隔) 毫秒单位
关于JS的定时器在jQuery中 函数名调用不能使用引号和括号
3.停止(清除)定时器
timer为全局变量,才会为它分配内存 才能被调用
—————————我是分界线—————————–
不积跬步,和以至千里 虽然是简单小实例,还是会有很多细节值得注意 慢慢积累 敲键盘 头脑里的实例多了 就业的能力就强了 工作好找了

    //我们的宗旨是服务大家,专治傻瓜。(有注释不可见)

你可能感兴趣的:(辣条类)