<HTML>
<HEAD>
<TITLE>CSS+JS滚动图片功能代码</TITLE>
<META http-equiv=Content-type content="text/html; charset=gb2312">
<STYLE type="text/css">
TD {
font-size: 12px;
border-right: medium none;
padding-right: 0px;
border-top: medium none;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-left: medium none;
padding-top: 0px;
border-bottom: medium none
}
.NUM1 {
background-position: left 50%;
padding-left: 10px;
background-image: url(scrollad_2.gif);
color: #006;
background-repeat: no-repeat
}
.NUM2 {
background-position: left 50%;
padding-left: 10px;
background-image: url(scrollad_3.gif);
color: #fff;
background-repeat: no-repeat
}
</STYLE>
<META content="MSHTML 6.00.2900.2769" name=GENERATOR>
</HEAD>
<BODY>
<center>
<TABLE cellSpacing=0 cellPadding=0 width=750>
<TBODY>
<TR>
<TD style="border-right: #cccccc 1px solid; padding-right: 0px; border-top: #cccccc 1px solid; padding-left: 0px; padding-bottom: 5px; border-left: #cccccc 1px solid; padding-top: 5px; border-bottom: medium none" width=750 bgColor=#e6e6e6>
<DIV style="width: 0px; position: relative; height: 0px">
<DIV style="z-index: 10; left: 748px; position: absolute; top: -6px; background-color: f4f4f4; layer-background-color: f4f4f4; border: 1px none #000000;">
<TABLE cellSpacing=0 cellPadding=0 width=30>
<TBODY>
<TR>
<TD width=30 height=4></TD>
</TR>
<TR>
<TD height=207>
<TABLE cellSpacing=0>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 1px" width=24 height=29>
<!-- 向上箭头 -->
<IMG id=upbtn style="CURSOR: pointer" onfocus=this.blur() onclick=slideup();clearInterval(interval01); height=28 alt=UP src="scrollad_1.gif" width=24>
</TD>
</TR>
<TR>
<TD height=2></TD>
</TR>
<!-- 数字123 -->
<TR>
<TD class=NUM2 id=led1 height=19>1</TD>
</TR>
<TR>
<TD height=2></TD>
</TR>
<TR>
<TD class=NUM1 id=led2 height=19>2</TD>
</TR>
<TR>
<TD height=2></TD>
</TR>
<TR>
<TD class=NUM1 id=led3 height=19>3</TD>
</TR>
<TR>
<TD height=3></TD>
</TR>
<TR>
<TD style="PADDING-LEFT: 1px" height=29>
<!-- 向下箭头 -->
<IMG id=downbtn style="CURSOR: pointer" onfocus=this.blur() onclick=slidedown();clearInterval(interval01); height=29 alt=DOWN src="scrollad_4.gif" width=24>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD height=6></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
<DIV id=main onmouseover=clearInterval(interval01); style="OVERFLOW: hidden; WIDTH: 748px; POSITION: relative; HEIGHT: 237px" onmouseout=iniautoslide(); noWrap>
<!-- 轮播图 -->
<DIV id=f1 style="Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 0px; HEIGHT: 237px"><img src="wall1.jpg" width=750 onload=checkdamie(1)></DIV>
<!-- 轮播图 -->
<DIV id=f2 style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 237px; HEIGHT: 237px"><img src="wall2.jpg" width=750 onload=checkdamie(2)></DIV>
<!-- 轮播图 -->
<DIV id=f3 style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 474px; HEIGHT: 237px"><img src="wall3.jpg" width=750 onload=checkdamie(3)></DIV>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT language=JavaScript>
// 当前位置，隐藏向上标签，轮播图大小，轮播图的高度，滚动的当前位置，滚动的速度，轮播图的数量数组
// 方法：检查。方法：提示从哪里开始
//当前海报的初始化标识符
var currentF = 1;
//默认的时侯是， 取得向上点击的图片的箭头, 设置CSS 隐藏
document.getElementById("upbtn").style.display = "none";
//取得轮播图的区域
var mainobj = document.getElementById("main");
//设置轮播高度237
var frameheight = 237;
//海报在视窗的初始货位置为 0
var scrolling = 0;
//海报滑动的速度为20
var speed = 20;
//轮播图的数量3 数组array
var checkloaded = new Array(); //[1,2,3]
// 把海报的123都通过for 全部加到空数组中。
for (i = 1; i <= 3; i++) {
checkloaded[i] = 0;
}
// 把轮播图放入数组中。检查这个数组中是否有这个海报的值。
// checkdamie(1) checkdamie(2) checkdamie(3)
// checkloaded[1] = 1; checkloaded[2] = 1; checkloaded[3] = 1;
// alert(checkloaded);
// alert("正在下载数据,请稍等");
// alert(checkloaded[1]); alert(checkloaded[2]); alert(checkloaded[3]);
function checkdamie(n) {
checkloaded[n] = 1;
//alert(checkloaded);
}
// 检查滚动的方向。先是向上还是向下。
//currentF=1 alert("正在下载数据,请稍等");
function alertloading(sdirection) {
// 视窗的初始位置为0
scrolling = 0;
//
if (sdirection == "down") {
// 当前海报的位置后退。
currentF--; //1--
} else {
// 当前位置前进。
currentF++; //1++
}
alert("正在下载数据,请稍等");
}
// 向下海报图和视窗的滚动
//这是 1 2 3 向下 向上标 的响应部分
function scrolldown(f) { //1
//有向下的滚动条的情况下，向下滚动的距离。
//var a = document.documentElement.scrollTop; alert(a);
//
switch (f) {
// 当是1 1是不动。
case 2: //1 != 2 2 === 2
//内容向下滚动的像素数 大于等于237的高度。
//alert(mainobj.scrollTop); 0,20,40,60-237
if (mainobj.scrollTop >= frameheight) { //内容向上滚动的像素数。
// 取消定时器
clearInterval(inter); //取消定时器的设置
// 视窗的到图的值等于237
mainobj.scrollTop = frameheight; //内容向上滚动的像素数。
// 海报在视窗的位置0
scrolling = 0; //滚动 0
} else {
// 视窗的滚动速度+=20
mainobj.scrollTop += speed; //内容向上滚动的像素数。 speed=20
}
break;
case 3:
// 如果图相对于视窗位置大于237*2 就是2个海报图的尺寸。
if (mainobj.scrollTop >= frameheight * 2) {
// 图相对于视窗的位置=237*2
mainobj.scrollTop = frameheight * 2;
// 取消定时器
clearInterval(inter);
// 图在视窗的值等于0
scrolling = 0;
} else {
// 图相对于视窗的效果尺寸+=20
mainobj.scrollTop += speed;
}
break;
}
}
// 向上海报图和视窗的滚动
function scrollup(f) {
switch (f) {
case 1:
if (mainobj.scrollTop <= 0) {
clearInterval(inter1);
mainobj.scrollTop = 0;
// 视窗的位置0
scrolling = 0;
} else {
// 视窗的滚动速度-=20
mainobj.scrollTop -= speed;
}
break;
case 2:
if (mainobj.scrollTop <= frameheight) {
mainobj.scrollTop = frameheight;
clearInterval(inter1);
scrolling = 0;
} else {
mainobj.scrollTop -= speed;
}
break;
}
}
// 海报图向下运动
function slidedown() {
// 如果当前位置等于3 则不动。
// 视窗的位置0
if (scrolling == 0) { //如果海报图，相对于视窗位置为0
scrolling = 1; // 海报图，相对于视窗位置变1
currentF++; // 则当前位置++
obj = eval("document.getElementById('f" + currentF + "')");
obj.style.display = "block";
if (checkloaded[currentF] == 1) {
inter = eval("setInterval('scrolldown(" + currentF + ")',5)");
document.getElementById("upbtn").style.display = "";
if (currentF == 3) {
document.getElementById("downbtn").style.display = "none";
}
for (i = 1; i <= 3; i++) {
eval("document.getElementById('led" + i + "').className='NUM1'");
}
eval("document.getElementById('led" + currentF + "').className='NUM2'");
} else {
alertloading("down");
}
}
}
// 海报图向上运动
function slideup() {
if (scrolling == 0) {
scrolling = 1;
currentF--;
obj = eval("document.getElementById('f" + currentF + "')");
obj.style.display = "block";
if (checkloaded[currentF] == 1) {
inter1 = eval("setInterval('scrollup(" + currentF + ")',5)");
document.getElementById("downbtn").style.display = "";
if (currentF == 1) {
document.getElementById("upbtn").style.display = "none";
}
for (i = 1; i <= 3; i++) {
eval("document.getElementById('led" + i + "').className='NUM1'");
}
eval("document.getElementById('led" + currentF + "').className='NUM2'");
} else {
alertloading("up");
}
}
}
var direction = "down";
var interval01;
var autotime = 3000;
// 自动向上向下
function autoslide() {
if (direction == "down") {
if (currentF == 2) {
direction = "up";
}
slidedown();
}
if (direction == "up") {
if (currentF == 2) {
direction = "down";
}
slideup();
}
}
// 定时器
function iniautoslide() {
interval01 = setInterval("autoslide()", autotime);
}
</SCRIPT>
</CENTER>
</BODY>
</HTML>