CSS+JS滾動圖片功能代碼_圖片特效特效

CSS+JS聯合打造帶控制按鈕的滾動圖片功能代碼，超好用，而且效果不錯，希望大家能夠喜歡。

<HTML><HEAD><TITLE>CSS+JS滾動圖片功能代碼</TITLE>
<META http-equiv=Content-type mrc="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 mrc="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="http://p1.mb5u.com/texiao/1/20110225160519385.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="http://p1.mb5u.com/texiao/1/20110225160519386.gif" 
                width=24></TD></TR></TBODY></TABLE></TD></TR>
        <TR>
          <TD height=6></TD></TR></TBODY></TABLE></DIV></DIV>
      <div   class="hz5hf5n"   id=main onmouseover=clearInterval(interval01); 
      style="OVERFLOW: hidden; WIDTH: 748px; POSITION: relative; HEIGHT: 237px" 
      onmouseout=iniautoslide(); noWrap>
      <div   class="hnv7vtv"   id=f1 
      style="Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 0px; HEIGHT: 237px"><img src="http://p1.mb5u.com/texiao/1/20110225160519387.jpg" width=750 onload=checkdamie(1)></DIV>
      <div   class="tn5ljbt"   id=f2 
      style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 237px; HEIGHT: 237px"><img src="http://p1.mb5u.com/texiao/1/20110225160519388.jpg" width=750 onload=checkdamie(2)></DIV>
      <div   class="dplljbj"   id=f3 
      style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 474px; HEIGHT: 237px"><img src="http://p1.mb5u.com/texiao/1/20110225160519389.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[n]=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; 
	}

}

//-->
</SCRIPT>
</CENTER></BODY></HTML>

所屬頻道：圖片特效特效/更新時間：2012-12-03

[收藏][報錯][返回列表]

相關圖片特效特效：

CSS+JS滾動圖片功能代碼_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些