翻页效果表格（清除定时器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
background-color: #062540;
}
.behavior {
width: 300px;
height: 200px;
font-size: 16px;
overflow: hidden;
color: rgb(166, 228, 255);
}
.behavior ul {
width: 100%;
height: 100%;
}
.behavior ul li {
height: 16.6%;
list-style: none;
}
.behavior li .l {
height: 100%;
float: left;
width: 60%;
}
.behavior li .r {
height: 100%;
float: left;
width: 40%;
}
</style>
<script src="jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="behavior">
<ul class="behaviorList">
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
<li>
<div class="l"></div>
<div class="r"><a href="#javascript">0</a></div>
</li>
</ul>
</div>
<script>
$(function() {
var json = [{
'name': '第1条',
'num': 99
}, {
'name': '第2条',
'num': 99
}, {
'name': '第3条',
'num': 99
}, {
'name': '第4条',
'num': 99
}, {
'name': '第5条',
'num': 99
}, {
'name': '第6条',
'num': 99
}, {
'name': '第7条',
'num': 99
}, {
'name': '第8条',
'num': 99
}, {
'name': '第9条',
'num': 99
}, {
'name': '第10条',
'num': 99
}, {
'name': '第11条',
'num': 99
}, {
'name': '第12条',
'num': 99
}];
for (var i = 0; i < json.length; i++) {
$('.behaviorList li').eq(i).find('.l').html(json[i].name).end().find('.r').html(json[i].num);
}
});
var doscrollList = function() {
var $parent = $('.behaviorList');
var length = $(".behavior ul li").length;
for (var i = 0; i < length; i++) {
if (i % 6 == 0) {
var $first = $parent.find('li').eq(0);
} else if (i % 6 == 1) {
var $two = $parent.find('li').eq(1);
} else if (i % 6 == 2) {
var $three = $parent.find('li').eq(2);
} else if (i % 6 == 3) {
var $four = $parent.find('li').eq(3);
} else if (i % 6 == 4) {
var $five = $parent.find('li').eq(4);
} else if (i % 6 == 5) {
var $six = $parent.find('li').eq(5);
} else {
}
}
var height = $first.height();
$first.animate({
height: 0
}, 600, function() {
$first.css('height', height).appendTo($parent);
});
$two.animate({
height: 0
}, 700, function() {
$two.css('height', height).appendTo($parent);
});
$three.animate({
height: 0
}, 800, function() {
$three.css('height', height).appendTo($parent);
});
$four.animate({
height: 0
}, 900, function() {
$four.css('height', height).appendTo($parent);
});
$five.animate({
height: 0
}, 1000, function() {
$five.css('height', height).appendTo($parent);
});
$six.animate({
height: 0
}, 1100, function() {
$six.css('height', height).appendTo($parent);
});
}
var myset = setInterval(function() {
doscrollList();
}, 3000);
$(".behavior")[0].addEventListener("mouseover", function() {
clearInterval(myset);
});
$(".behavior")[0].addEventListener("mouseout", function() {
myset = setInterval(function() {
doscrollList();
}, 3000);
})
</script>
</body>
</html>
这是用jquery做的一个翻页表格效果
使用了setInterval定时器 每3s定时刷新
最后使用了一个定时器的清除 来实现鼠标移入动画停止
