为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第12天 javascript(图片的自动轮播和停止)

1.课程名称:(图片的自动轮播和停止)


课程章节:进入网站后自动轮播,和鼠标停留在图片里不继续滑动


2.课程内容

 

      首先,我们要设置进入网站后轮播图自动轮播,不需要滑动离开后才能生效

        添加

        main.onmouseout();

    https://img1.sycdn.imooc.com//63240b5e0001098c12310794.jpg

    上面不是有mian.onmouseout了吗,为什么还要添加一个?

    因为上面那一个是方法,我们这一个是事件

    效果:

    https://img1.sycdn.imooc.com//63240be60001cd1e14850664.jpg

    设置了2秒半自动轮播了

    

    但是我们鼠标停留在图片里,没有停止轮播

    影响用户体验,所以我们需要我们鼠标停留在图片时

    清除定时器

    https://img1.sycdn.imooc.com//63240c8900012cb211170461.jpg

    在这里添加

    //滑过清除定时器

    if(timer)clearinterval(timer)

    如果timer为真的话,就清除定时器

    https://img1.sycdn.imooc.com//63240d1e00017cad11210611.jpg

    现在鼠标停留在图片中就不会自动轮播到下一张了,滑过后,继续轮播下一张图片

    

    效果:

    https://img1.sycdn.imooc.com//63240d9a000106e414880736.jpg

    三:本章重点

    没有重点哈,只有两小行的代码 O(∩_∩)O,理解就可以了

    

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消