自动滚屏：
相信好多朋友都看到过这样的情况，我们这里就更进一步，用一个框架来控制另一个框架中的屏幕滚动：
1：先做准备活动--创建两个框架结构：
<html>
<head>
<title>javascript frame autoscroll</title>
</head>
<frameset rows="308,*" cols="*">
<frame name="pictureFrame" src="picture.html" noresize="noresize" marginwidth="0"
marginheight="0">
<frame name="controIFrame" src="control.html">
</frameset>
</html>
我们在这个框架组中设立了两个窗口picturefrme和controlframe第一个是主的浏览窗口，第二个是控制窗口。
2：controlFrame窗口内容：
<body>
<div algn="center">
<form>
<input type="button" value="Left" onClick="stopScroll();scrollToLeft();">
<input type="button" value="Reset" onClick="resetScroll();">
<input type="button" value="Right" onClick="stopScroll();scrollToRight();">
</from>
</div>
</body>
3:创建函数：
var position=0;
var imageWidth=3024;
var step=2;
var timeout;
function scrollToRight() {
if (position<0) {
position=0;
}
if (position<=(imageWidth-window.document.width)) {
position=position+step;
window.parent.pictureFrame.scrollTo(position,0);
timeout=setTimeout("scrollToRight()",50);
}
}
function scrollToLeft() {
if (position>(imageWidth-window.document.width)) {
position=imageWidth-widow.document.width;
}
if (position>=0) {
position=position-step;
window.parent.pictureFrame.scrollTo(position,0);
timeout=setTimeout("scrollToLeft()",50);
}
}
function stopScroll() {
clearTimeout(timeout);
}
function resetScroll() {
stopScroll()
position=0;
window.parent.pictureFrame.scrollTo(position,0);
}
先不要害怕，我们慢慢来看这里面我们不懂的东西，然后用自己的语言来替换掉他。
position是上边框架的起始水平位置，滚动函数用这个变量跟踪框架的当前位置。
imagewidth指定了正在显示的图象的宽度。
step指定了每次调用scrollToRigt() 和scrollToLeft()的滚动步长（px）。
看名字你也猜的差不多了，函数scrollToRight()是控制上边框架想右滚动。
window.document.width得到的是浏览器窗口的宽度，这个属性只有NetscapeNavigator支持，所以本例在IE中无法正常运行
scrollTo()是一个window方法，它需要两个参数来指定当前可见区域的左上角的(x,y)位置。当一个网页初始加载时，它的滚动位置自动设为(0,0)，或者说左上角。
（回想一下前面学的javascript树，注意我们是如何从当前框架（window）周游到框架组（parent），然后回到pictureframe为上边的框架调用scrollTo()方法。）
scrollToRight()还使用了setTimeout()反噶法，我们曾经在前边的交替广告的例子中用过，这里我们用setTimeout()来重复调用scrollToRight()，每次调用都将把框架向右移动几个像素。setTimeout()使我们能够实现滚动的效果。setTimeout()的第二个参数控制调用的时间周期。我们用50，也就是50毫秒。
然后我们把setTimeout()的值有赋给了timeout这个变量；为什么呢？因为我们在后面停止滚动时用到了。
stopScroll()函数调用了clearTimeout()函数（setTimeout()的互补函数）来终止重复调用scrollToLeft()和scrollToRight()函数设置的暂时中断，最后函数resetScroll()通过设置position为0并调用scrollTo()使框架回到初始位置。
那么第一个函数就是
if （上边框架的起始水平位置<0）{
把他变成0
}
if （位置<=（图片宽度-窗口宽度））{
位置=位置+滚动步长
名为pictureframe的框架.水平滚动“位置”个像素
时间间隔为50毫秒，循环执行
}
好了，一切都很清楚了；你可以试着把其他三个函数这样写来，是不是就更清晰了啊？
这一讲到这就完了，各位如果想有更深刻的了解，建议想去把框架用到的HTML语言再去看一下，然后试着自己写一个类似的函数。 |
