<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();
for (i = 1; i <= 3; i++) {
checkloaded[i] = 0;
}
// 检查数组中的数量是否为1
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) { //内容向上滚动的像素数。 100 > 237
//inter = eval(“setInterval(‘scrolldown(” + currentF + “)’,5)”);
clearInterval(inter); //则取消定时器的设置
mainobj.scrollTop = frameheight; //内容向上滚动的像素数。
scrolling = 0; //滚动 0
} else {
mainobj.scrollTop += speed; //内容向上滚动的像素数。 100+20
}
break;
case 3:
if (mainobj.scrollTop >= frameheight * 2) { //100>=237*2
mainobj.scrollTop = frameheight * 2; //100=237*2
clearInterval(inter); //取消定时器。
scrolling = 0; //轮播未进行。
} else {
mainobj.scrollTop += speed; //100+20
}
break;
}
}
//按钮 1 2 3 向上的响应部分
function scrollup(f) {
switch (f) {
case 1:
if (mainobj.scrollTop <= 0) { //100 <= 0
clearInterval(inter1); //取消定时器。
mainobj.scrollTop = 0; //100=0
scrolling = 0; //未开始轮播
} else {
mainobj.scrollTop -= speed; //100-20
}
break;
case 2:
if (mainobj.scrollTop <= frameheight) { //100 <=237
mainobj.scrollTop = frameheight; //100=237
//inter1 = eval(“setInterval(‘scrollup(” + currentF + “)’,5)”);
clearInterval(inter1); //取消定时器。
scrolling = 0; //轮播未开始。
} else {
mainobj.scrollTop -= speed; //100-20
}
break;
}
}
//轮播向下滑动。
function slidedown() {
if (scrolling == 0) { //如果没有进行轮播。
scrolling = 1; //则从1开始轮播。
currentF++; //1++ 2 1了后2
//取得轮播图的f1 id
obj = eval(“document.getElementById(‘f” + currentF + “‘)”);
//显示轮播图
obj.style.display = “block”;
//如果轮播图的数里为1
if (checkloaded[currentF] == 1) {
//设置定时器。
inter = eval(“setInterval(‘scrolldown(” + currentF + “)’,5)”);
//选择向上的按钮。设置为空值。
document.getElementById(“upbtn”).style.display = “”;
//如果轮播图到了张3张
if (currentF == 3) {
//选择向下的按钮，设置为隐藏
document.getElementById(“downbtn”).style.display = “none”;
}
//取得按钮 1-3 led1 – led3
for (i = 1; i <= 3; i++) {
eval(“document.getElementById(‘led” + i + “‘).className=’NUM1′”);
}
//取得按钮 led1
eval(“document.getElementById(‘led” + currentF + “‘).className=’NUM2′”);
} else {
//否则提示正在加载中。
alertloading(“down”);
}
}
}
//轮播向上滑动。
function slideup() {
if (scrolling == 0) {
scrolling = 1;
currentF–; //1+1
obj = eval(“document.getElementById(‘f” + currentF + “‘)”); //f1
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>