<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.behavior {
width: 300px;
height: 200px;
font-size: 14px;
overflow: hidden;
background-color: #062540;
}
.behavior ul {
width: 100%;
height: 100%;
}
.behavior ul li {
border-bottom: 1px solid #ff00dd;
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>
<script>
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:first‘);
} 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() {
$first.css(‘height‘, height).appendTo($parent);
});
$three.animate({
height: 0
}, 800, function() {
$first.css(‘height‘, height).appendTo($parent);
});
$four.animate({
height: 0
}, 900, function() {
$first.css(‘height‘, height).appendTo($parent);
});
$five.animate({
height: 0
}, 1000, function() {
$first.css(‘height‘, height).appendTo($parent);
});
$six.animate({
height: 0
}, 1100, function() {
$first.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>
</head>
<body>
<div class="behavior">
<ul class="behaviorList">
<li>
<div class="line">
<div class="l">第一条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第2条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第3条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第4条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第5条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第6条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第7条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第8条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第9条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第10条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第11条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
<li>
<div class="line">
<div class="l">第12条</div>
<div class="r">
<div>0</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
