文字轮播效果

纵向

代码

ul {
	        list-style: none;
	        margin: 0;
	        padding: 0;
	    }
	    #content li {
	        font-size: 14px;
	        height: 20px;
	        line-height: 20px;
	        text-align: center;
	    }
	    #scrollUpBox {
	        height: 20px;
	        padding: 0 15px;
	        border: 2px solid #cccccc;
	        border-radius: 5px;
	        box-shadow: 0 0 10px #0000ff;
	        overflow: hidden;
	    }

<div id="scrollUpBox">
	    <ul id="content">
	    </ul>
	</div>

var arr = [
			{
				id: "1",
				name: "张一",
				prize: "状元"
			},
			{
				id: "2",
				name: "张二",
				prize: "榜眼（对堂）"
			},
			{
				id: "3",
				name: "张三",
				prize: "探花（三红）"
			},
			{
				id: "4",
				name: "张四",
				prize: "进士（四进）"
			},
			{
				id: "5",
				name: "张五",
				prize: "举人（二举）"
			},
			{
				id: "6",
				name: "张六",
				prize: "秀才（一秀）"
			}
		]
		scroll('scrollUpBox','content',arr,50);
		/*
		 * outerId：最外层div
		 * innerId：里层div
		 * txtArr： 传入的数据
		 * speed：控制滚动的速度
		 */
		function scroll(outerId,innerId,txtArr,speed) {

		    var scrollUpBox = document.getElementById('scrollUpBox');
		    var content = document.getElementById('content');
		    var arr = txtArr;
		    var list = '';
		    for(var i = 0; i < arr.length; i++) {
		    	list += '<li>恭喜' + arr[i].name + "获得" + arr[i].prize + '</li>';
		    }
		    list += '<li>恭喜' + arr[0].name + "获得" + arr[0].prize + '</li>';
		    content.innerHTML = list;
		  
		    function scrollUp() {

		        if (scrollUpBox.scrollTop >= (content.clientHeight - scrollUpBox.clientHeight)) {
		            scrollUpBox.scrollTop = 0;
		        } else {
		            scrollUpBox.scrollTop++;
		        }
		    }                
		    var TIME = speed;
		    var timer = setInterval(scrollUp, TIME);

		}

效果图

横向

#scrollLeftBox {
	        width: 200px;
	        padding: 10px 15px;
	        font-size: 14px;
	        border: 2px solid #cccccc;
	        border-radius: 5px;
	        box-shadow: 0 0 10px #0000ff;
	        white-space: nowrap;
	        overflow: hidden;
	    }

<div id="scrollLeftBox"></div>

var arr = ["张三","李四","王五","赵六","田七",""];
		wordScroll(arr,"scrollLeftBox");
		/*
		 * arr: 传入的数组
		 * el: 显示ID
		 */ 
		function wordScroll(arr,el) {
			var arrstr = arr;
			var str = arrstr.join("* * * *");
		    var scrollLeftBox = document.getElementById(el);
		    function scrollLeft() {
		        scrollLeftBox.innerHTML = str;
		        str = str.substring(1, str.length) +　str.substring(0, 1);
		    }                
		    setInterval(scrollLeft, 500);
		}