<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.lunbo {
position: relative;
width: 600px;
height: 50px;
border: 1px solid blue;
background: lightblue;
overflow: hidden;
}
ul {
position: absolute;
left: 0;
top: 0;
width: 600px;
height: auto;
}
ul li {
width: 600px;
height: 50px;
line-height: 50px;
font-size: 20px;
color: #333;
text-align: center
}
</style>
</head>
<!-- 这种方式在纯js开发的情况下可正常克隆点击事件，但在reactjs，vuejs中即使clone（true）第一遍轮询完后，第二遍点击事件失效：初步
判定原因为react虚拟dom克隆事件消失导致-->
<body>
<div class="lunbo">
<ul>
<li onclick="alert(1)">风萧萧兮易水寒</li>
<li onclick="alert(2)">壮士一去兮不复还</li>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
function lunbo(id, height) {
var ul = $(id); var liFirst = ul.find('li:first');
$(id).animate({ top: height }).animate({ "top": 0 }, 0, function () {
var clone = liFirst.clone(true);
$(id).append(clone);
liFirst.remove();
})
}
setInterval("lunbo('ul','-50px')", 3000)
</script>
</body>
</html>