向上：程序代码
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

向下：程序代码
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

向左：程序代码
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img
src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img
src="bzjd.gif"></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:100px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img
src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img
src="bzjd.gif"></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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

图片循环滚动代码(无缝滚动)相关推荐

  1. 文字图片滚动代码-无缝滚动，强！！！

    向左滚动: <DIV id=mhmove style="OVERFLOW: hidden; WIDTH: 440px">    <TABLE width=&quo ...

  2. Html笔记——实现一组图片循环且首尾相连的滚动效果

    设计思想:在一个Div内存放两个相同内容(使用一行多列表格)作为一个滚动对象,并将超出的宽度的内容隐藏,在JS脚本中定义Div向移动的方法(水平坐标加1).当第一个内容完全消失(即Div向左移动的距离 ...

  3. jQuery新闻列表滚动(上下滚动、横向滚动、无缝滚动、停顿滚动)

    自己搜的代码,亲测好使,可以根据自己的需要进行样式及js修改 <!doctype html> <html> <head><meta charset=" ...

  4. 留言滚动栏，html滚动代码，滚动留言代码

    留言滚动栏,一直滚动代码,在网上找了一圈没找到,自己写了一下午终于搞定! 效果如下: 注:1.单条留言高度,持续滚动,可直接复制使用.按自己需求调整css即可,已有注释,相信聪明的你肯定能看懂 2.如 ...

  5. marquee实现文字无缝滚动+css无缝滚动

    <marquee style="border: 1px solid red;" direction=left behavior=scroll loop=3 scrollamo ...

  6. 常用JS图片滚动代码大全

    原文地址:http://www.codefans.net/jscss/code/1801.shtml 本源代码收集了一些常用的网页图片滚动,无缝滚动,效果很平滑,包括上下左右四个方向的滚动,或许你现在 ...

  7. js计时器案例--带滚动条的无缝滚动

    带滚动条的无缝滚动 一.效果图 二.设计思路 三.核心代码 一.效果图 二.设计思路 第一步:克隆两个ul,使用循环计时器进行无缝滚动 第二步:设置滚动的速度和时间 第三步:设置鼠标进去box停止滚动 ...

  8. 无缝循环滚动图片的JS代码

    无缝循环滚动图片的JS代码,用来展示商品什么的最好了,图片URL可以自行替换,速度也可以自己调试. <html> <head> <meta http-equiv=&quo ...

  9. JS+CSS控制左右切换鼠标可控的无缝图片滚动代码

    代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...

最新文章

  1. 详解布隆过滤器的原理、使用场景和注意事项
  2. db29.7时间格式化为时间到时分秒_python基础系列 | 示例讲解时间模块datetime
  3. jquery选择器：与、或逻辑
  4. iphone数据存储之－－ Core Data的使用（一）
  5. 移动场景在其缩略图中显示场景中所显示的区域
  6. 哈佛大学单细胞课程|笔记汇总 （七）
  7. ie浏览器修复_微软IE浏览器曝零日漏洞：一个老文件格式，可致系统文件遭窃...
  8. Proteus8.9 下载与安装 以及大多数问题
  9. android如何加载一张大图片,Android 实现加载大图片的方法
  10. 十、决策树算法简介-泰坦尼克号乘客生存预测
  11. 【shell】shel脚本开发-条件测试
  12. 计算机 医学 sci期刊,1分左右医学sci期刊
  13. [20190227]Windows系统评估工具winsat.txt
  14. 将阿拉伯数字转换成汉字数字（小写）
  15. Anki 2.1.24 版本更新要点
  16. MQTT网关连接华为云物联网平台应用
  17. 使用AD8618设计ADC信号调理电路随笔
  18. linux 星际争霸,让星际争霸在Linux操作系统下转起来
  19. 谷歌浏览器图片无法显示，默认https加载
  20. Java Swing 搜狗输入法的问题

热门文章

  1. ubuntu18.04分辨率最高只有1024*768
  2. 在ROS平台上标定普通摄像头与Kinect摄像头
  3. 联想电脑尺寸在哪里看_笔记本屏幕大小怎么看 查看笔记本屏幕型号尺寸方法...
  4. 算法：食物链（并查集）
  5. 几款好用的子域名收集工具
  6. 直通车拼多多7天均价比价
  7. 《DNS与BIND（第5版）》——10.4 增量区域传输（IXFR）
  8. 你要做鸡头，还是凤尾？
  9. lqc_更新系统+弱口令扫描+nmap
  10. 【日常】计算机操作系统入门