计时器实现js轮播图的暂停与继续 |
您所在的位置：网站首页 › 前端实现轮播效果的软件 › 计时器实现js轮播图的暂停与继续 |
|
轮播图的暂停与继续
首先，使用定时器实现轮播效果，然后将定时器封装到autoMove函数中；然后执行autoMove();进行调用， autoMove();然后绑定鼠标进入进入事件，清空计时器； 例如： $("#ad").mouseenter(function(){ clearInterval(timer) })然后再次启动计时器： $("#ad").mouseleave(function(){ autoMove(); })实现代码：图片代码后边自取 淘宝广告 *{ margin:0;padding:0} #ad{ width: 250px; height: 250px; border: 1px solid #edafab; margin:100px auto 0; overflow:hidden; } #ad ol{ width: 49px; border-right: 1px solid #edafab; float: left; } #ad ol li{ list-style-type:none; height: 27px; border-bottom: 1px solid #edafab; line-height: 27px; text-align: center; font-size: 12px; background-color: #fcf2f1; cursor:pointer; } #ad ol li.on{ background: url('images/60/bg.gif'); } a{ display: inline-block; } #ad ul{ list-style: none; /* list-style-type:none; */ float: left; } /* #ad ul li{ display:none; } */ #ad ul li.on{ display:block; } |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |