CSS+JS滚动图片功能代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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(//ku.shouce.ren/files/images/201601/56a34033c1d34.gif); COLOR: #006; BACKGROUND-REPEAT: no-repeat
}
.NUM2 {
	BACKGROUND-POSITION: left 50%; PADDING-LEFT: 10px; BACKGROUND-IMAGE: url(//ku.shouce.ren/files/images/201601/56a3403424de6.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="//ku.shouce.ren/files/images/201601/56a340349391f.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="//ku.shouce.ren/files/images/201601/56a340351aa38.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="//ku.shouce.ren/files/images/201601/56a3403f3058b.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="" 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="//ku.shouce.ren/files/images/201601/56a340470297b.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS+JS滚动图片功能代码

分类

图片代码

描述

CSS+JS联合打造带控制按钮的滚动图片功能代码，超好用，而且效果不错，希望大家能够喜欢。