不间断图片左右滚动代码

最新推荐文章于 2016-12-20 15:02:26 发布
最新推荐文章于 2016-12-20 15:02:26 发布
阅读量1.9k 收藏
点赞数
分类专栏： 网页特效JS 文章标签： border function table

不间断图片左右滚动

 

luanshaofeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java实现图片滚动_怎么用Java代码使图片自行滚动浏览
weixin_42510805的博客
02-13 1480
图片循环滚动代码和图片无缝滚动代码先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间。先了解一...
起点小说解锁.js
最新发布
04-27
起点小说解锁.js
marquee属性的使用说明
weixin_34319374的博客
12-21 156
marquee属性的使用说明 (2007-07-16 09:45:59) 转载▼     <marquee> ... </marquee>移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等   鼠标属性 onMouseOut=this.start() ........鼠标移出状态滚动on...
不间断无接缝图片滚动
11-29
不间断无接缝图片滚动
向左不间断（无缝）滚动图片js代码下载
12-14
向左不间断（无缝）滚动图片js代码，这个代码用的人相信很多，有一点不好的就是当图片不足时不会滚动，所以使用时要多加几张图片。 ---------------------------------------------- <HTML> <HEAD> <TITLE>向左不间断（无缝）滚动图片js代码 - 中国asp之家收集整理 - http://www.aspxhome.com</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <link href="css/css.css" rel="stylesheet" type="text/css"> </HEAD> <BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0"> <CENTER> <TABLE style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" cellSpacing=0 cellPadding=0 width=750 align=center border=0> <TBODY> <TR> <TD> <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff"> <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> <TBODY> <TR> <TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center"><a href="http://www.aspxhome.com">链接演示</a></div></td> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center">2</div></td> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center">3</div></td> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center">4</div></td> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center">5</div></td> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center">6</div></td> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center">7</div></td> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center">8</div></td> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center">9</div></td> <td width="171" background="/article/UploadPic/20078/9/200789134819940.jpg"><div align="center">10</div></td> </tr> </table></TD> <TD id=demo2 vAlign=top>　</TD></TR></TBODY></TABLE></DIV> <SCRIPT> var speed3=25//速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed3) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)} </SCRIPT> </TD></TR></TBODY></TABLE></TD></TR></TABLE> </CENTER> </BODY></HTML> ------------------------- Trackback: http://www.aspxhome.com/download/javascript/20078/13049.htm
不间断向左滚动代码.rar
07-05
介绍： 图片不间断向左滚动代码
不间断无接缝图片滚动.rar
07-05
不间断无接缝图片滚动
不间断图片左右滚动代码演示
03-22
不间断图片左右滚动代码演示,很好用的一个js .可以调试图片以及图片大小 根据自己的需要...
图片上下左右不间断滚动代码
09-08
网页中图片的不间断上下左右滚动，下载下来改成HTML文件，插入网页内部，把图片改成自己的就行了
JS实现图片无间断滚动代码汇总
01-19
本文整理汇总了JavaScript实现图片滚动的常见代码，可以实现向上下左右四个方向的无缝滚动的效果，这是前端设计开发时常用的一个图片特效，你可只用其中的一种滚动效果。 具体的实例代码如下： <!DOCTYPE ...
Javascript实现图片不间断滚动的代码
11-22
蛮优秀的一段效果代码，可以上下左右滚动，收藏了！！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <... ...script type="text/jav
图片不间断无缝滚动 上下左右4种都有
05-17
js jquery图片不间断无缝滚动代码 向上 向下 向左 向右滚动 js 文件适合大部分程序员使用，基本的滚动功能
不间断向左滚动代码
dududu01的专栏
07-05 546
01
图片无缝滚动
weixin_30835933的博客
10-30 138
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &lt...
不间断图片横向滚动特效代码
Honey_Potter的博客
12-20 1012
body{margin:0px;} ul{list-style:none; border:0; padding:0px; margin:0px;} li{list-style:none; float:left; border:0; padding:0px; margin:0px;} img{border:0px; padding:0px; margin:0px;}
299-煤炭大数据智能分析解决方案.pptx
04-27
299-煤炭大数据智能分析解决方案.pptx
299-教育行业信息化与数据平台建设分享.pptx
04-27
299-教育行业信息化与数据平台建设分享.pptx
原生js写出页面底部图片不间断向左滚动展示
05-24
可以使用原生 JavaScript 和 CSS 实现页面底部图片不间断向左滚动展示。具体实现步骤如下： 1. 首先，在 HTML 中添加一个容器元素，用于包含需要滚动的图片。例如： ```html <div id="scroll-container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <!-- 添加更多图片... --> </div> ``` 2. 使用 CSS 将容器元素设置为横向滚动，并隐藏滚动条。例如： ```css #scroll-container { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; /* 让所有图片在一行上 */ -webkit-overflow-scrolling: touch; /* 支持触摸屏的平滑滚动 */ } ``` 3. 使用 JavaScript 自动滚动图片。首先，获取容器元素和所有图片元素： ```javascript var container = document.getElementById('scroll-container'); var images = container.getElementsByTagName('img'); ``` 然后，设置一个计时器，每隔一定时间滚动一定距离（图片的宽度加上一定的间距），直到滚动到最后一张图片时，重新开始滚动。 ```javascript var scrollDistance = images[0].offsetWidth + 10; // 每次滚动的距离（图片宽度 + 10 像素间距） var currentPosition = 0; // 当前滚动位置 setInterval(function() { currentPosition += scrollDistance; if (currentPosition >= container.scrollWidth) { // 到达最后一张图片时，重新开始滚动 currentPosition = 0; } container.scrollLeft = currentPosition; }, 3000); // 每隔 3 秒滚动一次 ``` 完整的代码示例如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片滚动展示</title> <style> #scroll-container { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; } img { margin-right: 10px; } </style> </head> <body> <div id="scroll-container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <!-- 添加更多图片... --> </div> <script> var container = document.getElementById('scroll-container'); var images = container.getElementsByTagName('img'); var scrollDistance = images[0].offsetWidth + 10; var currentPosition = 0; setInterval(function() { currentPosition += scrollDistance; if (currentPosition >= container.scrollWidth) { currentPosition = 0; } container.scrollLeft = currentPosition; }, 3000); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值