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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值