刚刚在逛校内的时候遇到一同学，有个小问题需要解决：写出“新浪体育频道滑动门效果文字滚动特效”。好在还有个样例，于是先观察了一下例子：

是一个很普通的文字滑块滑动特效。而要求将这个纵向的改成横向的。

于是操起chrome的审查元素功能开始查看这个滑块的原理：

先定义出来4个滑块，按照上下顺序依次排开，每经过几秒钟就向上移动一个滑块，依次类推……

这个里面涉及了几个知识点如下：

1.css中对于位置的定义：left: top:height:等等

2.position 中absolute和relative的用法区别

3.滑块运动控制scrollLeft和scrollTop等函数

4.自己编写按时间等待的滑动函数

首先定义好4个滑块的大小和位置，并且写好滑块之间的位置关系：

<div id=”f2″ style=”z-index: 10; left: 320px; width: 320px;
position: absolute; top: 0px; height: 85px;”>//这个是第二个滑块

<div id=”f3″ style=”z-index: 10; left: 640px; width: 320px;
position: absolute; top: 0px; height: 85px;”>//这个是第三个滑块

然后编写按时间等待的滑动函数：

<script language="javascript" type="text/javascript">
//<![CDATA[
var curFrame=1; //当前标签
var frameheight = 320; //单层高度
var speed = 5; //滚动速度
var waitTime = 4000; //自动播放间隔时间
var scrollItv;
var autoItv;
var maindiv = document.getElementById("main");
autoItv = setInterval(autoSlide, waitTime);
function slideTo(id){
	curFrame = id;
	var curTop = maindiv.scrollLeft;
	var tarTop = frameheight*(id-1);
	var step = curTop>tarTop?-speed:speed;
	clearInterval(autoItv);
	clearInterval(scrollItv);
	scrollItv = setInterval(function(){
		maindiv.scrollLeft += step;
		if(Math.abs(maindiv.scrollLeft-tarTop)<speed){
		clearInterval(scrollItv);
		maindiv.scrollLeft = tarTop;
		autoItv = setInterval(autoSlide, waitTime);
		}
	},20);
	for(i=1;i<=4;i++){
		document.getElementById('led'+i).className='NUM1';
	}
	document.getElementById('led'+curFrame).className='NUM2';
}
function autoSlide(){
	if(curFrame<4){curFrame++;}else{curFrame=1;}
	slideTo(curFrame);
}
//]]>
</script>

这里的重要地方为：

var frameheight = 320; 

scrollLeft

这样就能够实现横向滑动了。

点此下载源文件                                点此下载更改后的文件