<!--banner右边4张背景图 -->
<div class="g-banner-content" id="runBox">
<ol id="ol">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
</ol>
<ul class="circle" id="ul">
</ul>
<div class="arrow">
<a href="#" class="arrow-l" id="bgl"></a>
<a href="#" class="arrow-r" id="bgr"></a>
</div>
var bannerBox = $("runBox");
var ol = $("ol");
var ul = $("ul");
ol.appendChild(ol.children[0].cloneNode(true));
var olLis = ol.children;
for(var i=0;i<olLis.length-1;i++){
var ulLi = document.createElement("li");
ul.appendChild(ulLi);
}
var ulLis = ul.children;
for(var i=0 ; i<ulLis.length;i++){
ulLis[i].index=i;
ulLis[i].onmouseover=function () {
for(var j=0;j<ulLis.length;j++){
ulLis[j].className= "";
}
this.className = "current";
run(ol,-this.index*1200,40);
key = circle = this.index;
} ;
}
var key = 0;
var circle = 0;
var timer = null;
timer = setInterval(autoPlay,3000);
function autoPlay() {
clearInterval(timer);
key++;
if (key > ulLis.length) {
ol.style.left = 0;
key = 1;
}
run(ol, -1200 * key, 15);
circle++;
if (circle > ulLis.length - 1)
{ circle = 0;}
for (var j = 0; j < ulLis.length; j++) {
ulLis[j].className = "";
}
ulLis[circle].className = "current";
}
bannerBox.onmouseover = function () {
clearInterval(timer);
};
bannerBox.onmouseout = function() {
timer = setInterval(autoPlay,1000); // 开始轮播图定时器
};
JS写轮播图,定时器清除失效
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答
- Lean_95 2016-11-04 13:29关注
bannerBox.onmouseover = function () { clearInterval(timer); };
bannerBox.onmouseout = function() { timer = setInterval(autoPlay,1000);
函数里加入,console.log可以执行,但是定时器无法清除,轮播图一直在走解决 1无用
悬赏问题
- ¥15 #MATLAB仿真#车辆换道路径规划
- ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
- ¥15 数据可视化Python
- ¥15 要给毕业设计添加扫码登录的功能!!有偿
- ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
- ¥15 微信公众号自制会员卡没有收款渠道啊
- ¥100 Jenkins自动化部署—悬赏100元
- ¥15 关于#python#的问题:求帮写python代码
- ¥20 MATLAB画图图形出现上下震荡的线条
- ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘