【九月打卡】第12天 javascript(图片的自动轮播和停止)
1.课程名称:(图片的自动轮播和停止)
课程章节:进入网站后自动轮播,和鼠标停留在图片里不继续滑动
2.课程内容
首先,我们要设置进入网站后轮播图自动轮播,不需要滑动离开后才能生效
添加
main.onmouseout();
上面不是有mian.onmouseout了吗,为什么还要添加一个?
因为上面那一个是方法,我们这一个是事件
效果:
设置了2秒半自动轮播了
但是我们鼠标停留在图片里,没有停止轮播
影响用户体验,所以我们需要我们鼠标停留在图片时
清除定时器
在这里添加
//滑过清除定时器
if(timer)clearinterval(timer)
如果timer为真的话,就清除定时器
现在鼠标停留在图片中就不会自动轮播到下一张了,滑过后,继续轮播下一张图片
效果:
三:本章重点
没有重点哈,只有两小行的代码 O(∩_∩)O,理解就可以了
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦