您的位置：首页 > Web前端 > JavaScript

CSS+JS滚动图片功能代码

2009-08-31 11:46 417 查看
<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(/jscss/demoimg/200908/scrollad_2.gif); COLOR: #006; BACKGROUND-REPEAT: no-repeat
}
.NUM2 {
BACKGROUND-POSITION: left 50%; PADDING-LEFT: 10px; BACKGROUND-IMAGE: url(/jscss/demoimg/200908/scrollad_3.gif); COLOR: #fff; BACKGROUND-REPEAT: no-repeat
}
</STYLE>
<META content="MSHTML 6.00.2900.2769" name=GENERATOR></HEAD>
<BODY>
<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="/jscss/demoimg/200908/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="/jscss/demoimg/200908/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="http://www.codefans.net/jscss/demoimg/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="http://www.codefans.net/jscss/demoimg/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="http://www.codefans.net/jscss/demoimg/wall3.jpg" width=750 onload=checkdamie(3)></DIV></DIV></TD></TR></TBODY></TABLE>
<SCRIPT language=JavaScript>
<!--
var currentF=1;
document.getElementById("upbtn").style.display="none";
var mainobj = document.getElementById("main");
var frameheight = 237;
var scrolling=0;
var speed = 20;
var checkloaded=new Array();
for(i=1;i<=3;i++){
checkloaded[i]=0;
}
function checkdamie(n){
checkloaded
=1;

}
function alertloading(sdirection){
scrolling=0;
if(sdirection == "down"){
currentF--;
}
else{
currentF++;
}
//alert("正在下载数据,请稍等");
}

function scrolldown(f){

switch (f){
case 2:
if (mainobj.scrollTop>=frameheight){
clearInterval(inter);
mainobj.scrollTop=frameheight;
scrolling=0;
}
else{mainobj.scrollTop+=speed;}
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航