先给大家展示下效果图：

完整演示如下

每两秒随机向上或者向下滚动，如果要替换新内容，则通过html()更新内容即可（查看注释代码)

！DOCTYPE html head meta name=' viewport ' Content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/style ul，Li { list-style-type : none；border:固体；} ul{ overflow:隐藏；/*让里超出保险商实验所时隐藏*/}正文{ margin : 0px }/style/head dydiv ul Li img src=' http :https://Tim GSA。百度。com/timg？图像质量=80 size=b 9999 _ 10000 sec=1503543418892 di=1f 606 f 0990 cf 6fa 893 c 8330457 b5 fde2imgtype=0 src=http://i3。万岁。com。cn/blog file/201509/16/BBS img 14424068814516 _ 480 * 360。jpg image quality=80 size=b 9999 _ 10000 sec=1503543451619 di=a 578 da a6 b 6 f 794 CB 233 f 655 CD 5 ecaf 91 img type=0 src=http://img。qqqzhi。com/upload/img _ 0 _ 3518803618d 2241430362 _ 23。jpg '/Li liimg src=' http 33600图像质量=80 size=b 9999 _ 10000 sec=1503544550636 di=086d 27111 b 428 fad F9 e 23 ab B7 c 06 B1 eim gtype=0 src=http://uploads。叶友佳。com/CMS/images/2017/02/10/589 D8 e 4598d 46285900450。png '/Li/ul/div脚本srcvar re=math。回合(r分钟)；re=Math.max(Math.min(re，max)，min)return re；} $(function(){ setInterval(function(){ if(getRandom(0，1)==0){ //向上滚动特效var ul=$(' ul ')；var $ first=ul。查找('李：首')；var height=$ first。高度()；$第一。animate({ marginto p :-height ' px ' }，500，function(){//$ first。CSS(' marginto p '，0).html(新日期()。getMinutes() ': '新日期()。getSeconds()).附录(ul)；/*不要写成追加*/$first.css('marginTop '，0).附录(ul)；});}else{ //向下滚var ul=$(' ul ')；var LiHigh=ul。查找('李：最后').高度();//计算最后一个里元素的高度ul。animate({ MarginTop : LiHigh ' px ' }，500，function(){//ul。查找(' li: last ').html(新日期()。getMinutes() ': '新日期()。getSeconds()).前置到(ul)；/*不要写成前置*/ul.find('li:last ').前置到(ul)；/*不要写成前置*/ul.find('li:first ').hide()；ul。CSS({ marginto p :0 })；ul.find('li:first ').淡入(1000)；});} },2000);});/脚本/正文/html效果