手记

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

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


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


2.课程内容

 

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

        添加

        main.onmouseout();

    

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

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

    效果:

    

    设置了2秒半自动轮播了

    

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

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

    清除定时器

    

    在这里添加

    //滑过清除定时器

    if(timer)clearinterval(timer)

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

    

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

    

    效果:

    

    三:本章重点

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

    

0人推荐
随时随地看视频
慕课网APP