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