JS图片不间断滚动代码(向上，向下，向左，向右)

conkeyn

浏览: 1523802 次
性别:
来自: 厦门

最近访客更多访客>>

fuyun10036

yl4257891

ja_1991

chenzehe

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript

JS不间断向左滚动

<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.jpg"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

JS不间断向右滚动

<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.jpg"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

JS不间断向上滚动

<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><div id=demo1>
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.jpg">
</div>
<div id=demo2></div>
</div>
<script>
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

JS不间断向下滚动

<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><div id=demo1>
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg">
<img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.jpg">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

<div id="demo" style="overflow:hidden;height:100px;width:310px;color:#ffffff">
					<table align="left" cellpadding="0" cellspace="0" border="0" width="310" >
					<tr>
						<td id="demo1" valign="top">
							<table align="left" cellpadding="0" cellspace="0" border="0" width="310" >
								<tr>
									<td><img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg"></td>
                                    <td><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"></td>
                                    <td><img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg"></td>
                                    <td><img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg"></td>
                                    <td>
</td>
								</tr>
							</table>
						</td>
						<td id="demo2" valign="top" ></td>
					</tr>
				</table>
				</div>
<script type="text/javascript">
var speed = 70;
var demo =document.getElementById("demo");
var demo1 =document.getElementById("demo1");
var demo2 =document.getElementById("demo2");
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
	if (demo2.offsetWidth - demo.scrollLeft <= 0)		
		demo.scrollLeft -= demo1.offsetWidth;
	else {
		demo.scrollLeft++;
	}
}
var MyMar = setInterval(Marquee, speed);
demo.onmouseover = function() {
	clearInterval(MyMar);
}
demo.onmouseout = function() {
	MyMar = setInterval(Marquee, speed);
}
</script>

分享到：

javascript 中 offsetWidth 是什么意思？ | 利用javascript实现web页面刷新的方法

2009-01-16 09:29
浏览 14146
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS图片不间断滚动代码(向上，向下，向左，向右)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS图片不间断滚动代码(向上，向下，向左，向右)

评论

发表评论

相关推荐

Angularjs 1.x 中使用 layDate 日期控件

简易向左移动的滚动效果 jquery simple marquee

angualrjs添加动态指令（动态编译指令）

CKeditor的取值和赋值

Spring boot 环境下配置CKEditor添加google map

javascript中借用别的类的方法

Javascript的类与子类创建

jQuery 对 select 操作

JSON2的使用方法心得

json对象的应用

JQuery对html控件操作总结

将json元素添加到表单select中

js加密解密

设为首页JS,加入收藏夹js,加入收藏夹代码,设为首页代码,火狐和ie兼容

精通 JS正则表达式

jQuery.Autocomplete 中文支持

强烈推荐：240多个jQuery插件

jQuery中this与$(this)的区别

JS获得鼠标位置（兼容多浏览器ie,firefox）

javascript 计算文字长度

最近访客更多访客>>