先讲思路：
1.设定基本样式：两个p，一个为父级，区域高度小，一个子级，区域高度大，对父级区域设置overflow:hidden;溢出部分隐藏;在子级区域可以设p，图片。
2.使用jQuery，先引入jQuery包，在script中定义方法，获取父级区域的id.(或者class、标签)使用jquery中的方法：$(“#id”).scrollTop(i),对scrollTop的值设置成变量i，我们就要围绕着变量做文章。还需要用到js中的定时器，用周期定时器做循环操作。
3.具体要实现的效果：
①让子区域的图片或文字向上动，即垂直滚动条向下划，滑动的速度
②滚动条不可能无限下滑，所以必须设置条件判断
③具体到滑动到某区域的停顿时间，
具体的思路就是这样，写到后面具体补充
代码实现：
1.实现样式(父区域all,子区域text)
<body>
<!--父区域all开始-->
<p class="big">
<!--子区域开始-->
<p id="small">
<p class="blue">
</p>
<p class="red">
</p>
</p>
<!--子区域结束-->
</p>
<!--父区域结束-->
</body>
css样式：
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
//父区域
.big{
width: 550px;
height: 50px;
border: 1px solid red;
overflow: scroll;//可以看到滚动条
//overflow:hidden;滚动条隐藏
}
//子区域
#small{
width: 550px;
height: 100px;
/*border: 1px solid blue;*/
}
.blue{
width: 550px;
height: 50px;
background-color: blue;
}
.red{
width: 550px;
height: 50px;
background-color: red;
}
</style>
查看效果：有一个蓝色p和滚动条，向下滑动滚动条可以看到红色p
2.使用jQuery代码，实现蓝色p和红色p循环交替
①实现滚动条向下滑动：
<script type="text/javascript">
//定义初始值i=0的全局变量
var i=0;
//设定一个定时器，调用showUp()函数，每0.05秒调用一次，形成一个循环
var timer=setInterval(showUp,50);
//定义一个滚动条向下滑动的方法，即p向上滑动
function showUp(){
//对变量i进行叠加
i++;
//取得父区域的类名，同时调用滚动条向下滑动的方法，scrollTop(),
//对它的值设置为变量i
$(".big").scrollTop(i);
//设定定时器的条件，当滚动条达到底部时，清除定时器，让它停止
if(i>=37){
//清除定时器
clearInterval(timer);
}
}
</script>
这是效果是蓝色p滑动到红色p结束。这里只是实现了一次蓝转红的翻滚。
还没有做到循环滚动。
②循环滚动;为什么没有做到循环滚动呢?只要是在于if判断语句，上面的代码是当i>=37时，周期定时器timer就直接被清除了，就直接停了。让周期定时器重新启动，不就可以继续循环了，同时要注意把i的值重新赋值为0
if(i>=37){
//清除定时器
clearInterval(timer);
//i重新赋值为0
i=0;
//重新调用周期定时器
timer=setInterval(showUp,100);
}
好做到这里，我们发现可以做完了循环效果了，是不是结束了呢，但是仔细看效果你会发现，在蓝变红和红变蓝对比，发现红变蓝的速度明显要快，而且很突兀，没有这种蓝变红的渐变速度，而是突然红就转到蓝了，这是什么原因呢? 嗯，这是我们的代码有问题，要优化一下。问题在哪?还是在if条件上，在条件上是当i>=50的时候，直接就给i=0;这是造成这种突兀的根本原因。
