<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>
<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)
function checkdamie(n) {
checkloaded[n] = 1;
}
//currentF=1 alert("正在下载数据,请稍等");
function alertloading(sdirection) {
scrolling = 0; //开始滚动 为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) {
case 2: //1 != 2 2 === 2
if (mainobj.scrollTop >= frameheight) { //内容向上滚动的像素数。
clearInterval(inter); //取消定时器的设置
mainobj.scrollTop = frameheight; //内容向上滚动的像素数。
scrolling = 0; //滚动 0
} else {
mainobj.scrollTop += speed; //内容向上滚动的像素数。 speed=20
}
break;
case 3:
if (mainobj.scrollTop >= frameheight * 2) {
mainobj.scrollTop = frameheight * 2;
clearInterval(inter);
scrolling = 0;
} else {
mainobj.scrollTop += speed;
}
break;
}
}
function scrollup(f) {
switch (f) {
case 1:
if (mainobj.scrollTop <= 0) {
clearInterval(inter1);
mainobj.scrollTop = 0;
scrolling = 0;
} else {
mainobj.scrollTop -= speed;
}
break;
case 2:
if (mainobj.scrollTop <= frameheight) {
mainobj.scrollTop = frameheight;
clearInterval(inter1);
scrolling = 0;
} else {
mainobj.scrollTop -= speed;
}
break;
}
}
function slidedown() {
if (scrolling == 0) {
scrolling = 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>