图片无缝滚动代码

先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

先了解一下对象的几个的属性:
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

向上滚动的代码:
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
demo.οnmοuseοver=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
</script>

向下滚动:
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollTop<=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

向左滚动:
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

向右滚动:
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

转载于:https://www.cnblogs.com/juan/archive/2009/05/07/1452078.html

图片循环滚动代码[转]相关推荐

  1. 【js特效】图片循环滚动代码

    1.效果图如下: 2.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. 图片循环滚动代码(无缝滚动)

    向上:程序代码 <div id=demo style="overflow:hidden; width:128px; height:300px;"> <div id ...

  3. html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果

    1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.se ...

  4. JS实现图片循环滚动

    之前在前端的时候有遇到这样一个问题,实现 JS 图片的循环滚动,然后鼠标移入的时候停止滚动,鼠标移开继续滚动,这里无非就是设置了一个定时器,鼠标移上时清除定时器达到滚动停止的目的,鼠标移开时重设定时器 ...

  5. cocos2d(背景图片循环滚动)

    背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...

  6. 有空间感的图片环形滚动代码

    代码简介: 图片围成环形来回滚动的图片特效,有立体感,而且设计的也挺不错,演示中除了部分图片,为了让页面加载更快,如果你想用的话,你可以无限制添加下去,只要你的网页很快哦. 代码内容: View Co ...

  7. 3.8 JS 制作无间断图片循环滚动效果

    制作无间断图片循环滚动效果 要求图片高度,高度自行设定,要求显示n张图片(n=你的学号末位+6),例如:你的学号末位是3,那么你需要显示3+6共9张图片,9张图片循环滚动 index.html < ...

  8. 滚动代码循环滚动代码如何怎么样做淘宝轮播代码滚动天猫店铺装修自定义内容代码设置

    滚动代码循环滚动代码如何怎么样做淘宝轮播代码滚动天猫店铺装修自定义内容代码设置

  9. 新闻分页循环图片左右滚动代码html,jQuery响应式触屏图片左右滚动代码owl.carousel...

    这是一款基于owl.carousel.js和jquery-1.9.1.min.js实现的响应式左右滚动代码,自适应屏幕大小,响应式设计,完美兼容PC端和手机移动设备,支持触屏滑动效果,支持点击按钮切换 ...

  10. php图片左右滚动代码怎么写,css图片滚动代码怎么写?轮播图横向滚动展示

    在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...

最新文章

  1. Windows server 2003共享文件夹问题
  2. 从Openvswitch代码看网络包的旅程
  3. MVC --.Routing
  4. 全球及中国盘式削片机行业运营模式与“十四五”投资规划建议报告2022-2027年版
  5. ImportBeanDefinitionRegistrar向容器中注册bean
  6. html(3)标签(2)
  7. Oracle迁移数据库
  8. Flink的并行度和Kafka的partition的结合
  9. 机器学习--k均值聚类(K-means)
  10. MVC案例之DAO层设计
  11. java 数据库题,JAVA数据库笔试习题(答案在最后
  12. Chrome浏览器另存为时浏览器假死问题
  13. 分形理论在地理信息科学研究中的应用
  14. 买域名+配置SSL站点
  15. iOS字体大小适配的几种方法
  16. Rasa课程、Rasa培训、Rasa实战Rasa 3.1.0最新版本发布 2022-03-25
  17. 计算机的录像功能在哪里找,电脑自带录屏软件在哪?一键开启视频录制的方法...
  18. MuMu模拟器网络连接异常如何处理?
  19. 关于websocket的http无法升级到ws请求的错误The HTTP response from the server [404] did not permit the HTTP upgrad
  20. VS Code修改语言设置后依旧显示英文的问题解决

热门文章

  1. WavePad如何在音乐文件上录制声音
  2. 一些没啥意思的出题想法记录
  3. 深度 | 朴素贝叶斯模型算法研究与实例分析
  4. django为Form生成的label标签添加class
  5. 发现有的时候,EBS会报连接数不足的问题
  6. Swing组件集合的事件处理(六)
  7. ssh 本地转发 和远程转发 区别
  8. 让程序员崩溃的一句话。。。
  9. 8,888+ 字,彻底征服 Spring AOP!
  10. 如何打造高可伸缩的移动电商架构?