图片滚动代码，图片链接上下滚动效果

小提示

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>
<SCRIPT language="JavaScript">
<!--
var scrollerwidth=118		//图的宽度
var scrollerheight=42		//图的高度
var scrollerbgcolor='white'	//背景颜色
var pausebetweenimages=3000	//每个图间暂停3秒。
//编辑下面的行，如果希望logo都是带连接的，只要加上<a>标签即可。
var slideimages=new Array()
slideimages[0]='<A href="http://www.baidu.com" target=_blank><IMG alt=百度搜索 src="//ku.shouce.ren/files/images/201601/56a34a023d0da.jpg" border="0"></A>'
slideimages[1]='<A href="http://www.163.com"  target=_blank><IMG alt=网易163 src="//ku.shouce.ren/files/images/201601/56a34a12a3a9e.jpg" border="0"></A>'
slideimages[2]='<A href="http://www.sina.com.cn" target=_blank><IMG alt=新浪sina src="//ku.shouce.ren/files/images/201601/56a34a1327fbb.jpg" border="0"></A>'
slideimages[3]='<A href="/" target=_blank><IMG alt=手册网 src="//ku.shouce.ren/files/images/201601/56a34a13a0bb9.jpg" border="0"></A>'
slideimages[4]='<A href="http://www.chinaren.com" target=_blank><IMG alt=中国人chinaren src="//ku.shouce.ren/files/images/201601/56a34a1422687.jpg" border="0"></A>'
//尽管填加更多的。
if (slideimages.length>1)
i=2
else
i=0
//移动层(NS浏览器用)
function nsmmovea(whichlayer){
tlayer=eval(whichlayer)				//得到待移动的层
if (tlayer.top>0&&tlayer.top<=5){		//如果目标层已经基本移到显示区中间
tlayer.top=0					//将层调整到显示区中间
setTimeout("nsmmovea(tlayer)",pausebetweenimages)//在延时后准备将目标层移出显示区
setTimeout("nsmmoveb(document.main.document.second)",pausebetweenimages)//在延时后准备将第二层移进显示区
return						//退出(不再上移图片)
}
if (tlayer.top>=tlayer.document.height*-1){	//如果目标层还没有完全移出显示区
tlayer.top-=5					//则上移目标层
setTimeout("nsmmovea(tlayer)",100)		//准备继续移动
}
else{						//否则(目标层已经移出显示区(不可见))
tlayer.top=scrollerheight			//将目标层调整到显示区以下
tlayer.document.write(slideimages[i])		//将第i条内容写入显示区
tlayer.document.close()				//关闭文本流
if (i==slideimages.length-1)			//改变i的值，准备下一次轮换成另一条预定义的内容
i=0
else
i++
}
}
//这个函数结构与上个相同，两个过程分别用于控制两个不同的层
function nsmmoveb(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("nsmmoveb(tlayer2)",pausebetweenimages)
setTimeout("nsmmovea(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("nsmmoveb(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
//移动层(IE浏览器用)
function iemovea(whichdiv){
tdiv=eval(whichdiv)					//得到待移动的层
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){	//如果目标层已经基本移到显示区中间
tdiv.style.pixelTop=0					//将层调整到显示区
setTimeout("iemovea(tdiv)",pausebetweenimages)		//在延时后准备将目标层移出显示区
setTimeout("iemoveb(second2)",pausebetweenimages)	//在延时后准备将第二层移进显示区
return							//退出(不再上移图片)
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){		//如果目标层还没有完全移出显示区
tdiv.style.pixelTop-=5					//则上移目标层
setTimeout("iemovea(tdiv)",100)				//准备继续移动
}
else{							//否则(目标层已经移出显示区(不可见))
tdiv.style.pixelTop=scrollerheight			//将目标层调整到显示区以下
tdiv.innerHTML=slideimages[i]			//将其内容替换成第i条
if (i==slideimages.length-1)			//改变i的值，准备下一次轮换成另一条预定义的内容
i=0
else
i++
}
}
//这个函数结构与上个相同，两个过程分别用于控制两个不同的层
function iemoveb(whichdiv){				
tdiv2=eval(whichdiv)				//取的目标层
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){	//如果目标层已经基本移到显示区中间
tdiv2.style.pixelTop=0				//将目标层调整到显示区
setTimeout("iemoveb(tdiv2)",pausebetweenimages)		//在延时后准备将目标层移出显示区
setTimeout("iemovea(first2)",pausebetweenimages)	//在延时后准备将第二层移进显示区
return		//退出(不再上移图片)
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){	//如果目标层还没有完全移出显示区
tdiv2.style.pixelTop-=5				//则上移目标层
setTimeout("iemoveb(second2)",100)			//准备继续移动
}
else{					//否则
tdiv2.style.pixelTop=scrollerheight			//将目标层调整到显示区以下
tdiv2.innerHTML=slideimages[i]			//将其内容替换成第i条
if (i==slideimages.length-1)			//改变i的值，准备下一次轮换成另一条预定义的内容
i=0
else
i++
}
}

function startscroll(){
if (document.all){				//如果是IE
iemovea(first2)				//调用iemovea调整层的位置，准备移动各层
second2.style.top=scrollerheight			//将第二层移到显示区以下
}
else if (document.layers){				//如果是NS
nsmmovea(document.main.document.first)		//开始移动第一层
document.main.document.second.top=scrollerheight+5	//将第二层移到显示区以下
document.main.document.second.visibility='show'		//显示第二层
}
}

</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide> 
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>
<p>

<SCRIPT language="JavaScript">

</SCRIPT>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

图片滚动代码，图片链接上下滚动效果

分类

图片代码

描述

一款图片链接滚动特效，让图片链接的图片滚动起来，垂直方向上的滚动，每次滚动一个图片，停留数秒后继续滚动，无缝循环的图片链接滚动代码。