轮播图中点按钮停止后等几秒再自动播放的代码
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<style>
div{float:left;width:100px;overflow:hidden;}
span{position:relative;float:left;width:400px;}
div img{width:100px;height:100px;float:left;}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
<span>
<img style="background-color:red;">
<img style="background-color:green;">
<img style="background-color:blue;">
<img style="background-color:red;">
<span>
</div>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<script>
var n=0
function run(){
if(n<3){n++}else{
n=1;
$("span").css({left:0})
}
$("span").stop(true,true).animate({left:-100*n},500)
}
var t = setInterval(run,2000)
$("input").click(
function(){
clearInterval(t)//点按钮停止之前的定时器
n=$("input").index(this)
$("span").stop(true,true).animate({left:-100*n},500)
setTimeout(function(){//点按钮后4秒中后重新定时
clearInterval(t)//避免连续点击按钮重复定时
t = setInterval(run,2000)
},4000)//4秒
}
)
</script>
</body>
</html>