轮播图的暂停与继续
首先,使用定时器实现轮播效果,然后将定时器封装到autoMove函数中;然后执行autoMove();进行调用,
autoMove();
然后绑定鼠标进入进入事件,清空计时器;
例如:
$("#ad").mouseenter(function(){
clearInterval(timer)
})
然后再次启动计时器:
$("#ad").mouseleave(function(){
autoMove();
})
实现代码:图片代码后边自取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝广告</title>
<style>
*{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;
}
</style>
</head>
<body>
<div id="ad">
<ol>
<li class="on">女靴</li>
<li>雪地靴</li>
<li>冬裙</li>
<li>呢大衣</li>
<li>毛衣</li>
<li>棉服</li>
<li>女裤</li>
<li>羽绒服</li>
<li>牛仔裤</li>
</ol>
<ul>
<li class="on"><a href=""><img src="./images/60/女靴.jpg" alt=""></a></li>
<li><a href=""><img src="./images/60/雪地靴.jpg" alt=""></a></li>
<li><a href=""><img src="./images/60/冬裙.jpg" alt=""></a></li>
<li><a href=""><img src="./images/60/呢大衣.jpg" alt=""></a></li>
<li><a href=""><img src="./images/60/毛衣.jpg" alt=""></a></li>
<li><a href=""><img src="./images/60/棉服.jpg" alt=""></a></li>
<li><a href=""><img src="./images/60/女裤.jpg" alt=""></a></li>
<li><a href=""><img src="./images/60/羽绒服.jpg" alt=""></a></li>
<li><a href=""><img src="./images/60/牛仔裤.jpg" alt=""></a></li>
</ul>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
var timer = null;
function autoMove(){
let c=1
let imgs = document.getElementsByTagName("img").length
timer=setInterval(function(){
let a=parseInt($("ul").css("marginTop"))
let uh = $("ul").height()
if(c>=imgs){
c=0
$("ul").animate({marginTop:-254*c},0)
$("ol li").eq(c).attr("class","on").siblings().attr("class","")
c=1
}else{
$("ol li").eq(c).attr("class","on").siblings().attr("class","")
$("ul").animate({marginTop:-254*c},0)
c++;
}
},1000);
}
autoMove();
$("#ad").mouseenter(function(){
clearInterval(timer)
}).mouseleave(function(){
autoMove();
})
})
</script>
</body>
</html>
图片: