jquery滚动公告demo

版权声明:博客地址:http://www.zhangweiwei.cn/ 欢迎交流~ https://blog.csdn.net/u011263845/article/details/45875425

实现公告栏目循环的滚动效果,直接放代码:

<!doctype html>
<!--jq110-->
<html>
</body>
</html>
<head>
<meta charset="utf-8">
<title>tianzi  code</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
    setInterval(function(){
        var x=$("ul>:first").clone(true);
        $("ul").append(x);
        $("ul>:first").remove();
    }, 2000)
})
</script>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
body{
    margin: 50px;
}
ul{
    list-style: none;
}
li{
    height: 30px;
    line-height: 30px;
}
</style>
</head>
<body>
<ul>
    <li>第一条公告1</li>
    <li>第二条公告2</li>
    <li>第三条公告3</li>
    <li>第四条公告4</li>
    <li>第五条公告5</li>
    <li>第六条公告6</li>
    <li>第七条公告7</li>
    <li>第八条公告8</li>
    <li>第九条公告9</li>
    <li>第十条公告10</li>
</ul>
</body>
</html>

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页