当前位置：首页 > 资讯 > 技术文档

符合W3C Web标准的图片连续无间隙水平滚动

时间：2020-05-21 02:22 编辑：来源：阅读：
扫一扫，手机访问

摘要：符合W3C Web标准的图片连续无间隙水平滚动

这次又遇上一个这样的问题，找了老半天终于从网上找到一个不错的，看了下代码，思路很简单，但代码太多，通用性也不行，于是乎，自己又发明了两个函数，用起来感觉还真不错，与大家共享：

图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准_ 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
 
 
<div id="demo" style="overflow: hidden; width: 322px; height: 61px"> 
<table align="left" border="0" cellpadding="0" cellspace="0"> 
<tr> 
<td id="demo1" valign="top"><table bgcolor="#fffbf7" border="0" cellpadding="0" cellspacing="0" width="322"> 
<tr align="center"> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
</tr> 
</table></td> 
<td id="demo2" valign="top"></td> 
</tr> 
</table> 
</div> 
<div id="demo0" style="overflow: hidden; width: 322px; height: 61px"> 
<table align="left" border="0" cellpadding="0" cellspace="0"> 
<tr> 
<td id="demo11" valign="top"><table bgcolor="#fffbf7" border="0" cellpadding="0" cellspacing="0" width="322"> 
<tr align="center"> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/www.yonfa365.com.jpg[/img]
</img> </td> 
</tr> 
</table></td> 
<td id="demo22" valign="top"></td> 
</tr> 
</table> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

以下为网上提供的代码

Untitled Document 
 
 
[img]http://www.1sucai.cn/article/images/butt_arrowl.gif[/img]
</img> [img]http://www.1sucai.cn/article/images/butt_arrowr.gif[/img]
</img> 
<div> 
<div id="demo" style="OVERFLOW: hidden; WIDTH: 322px; HEIGHT: 61px"> 
<table align="left" border="0" cellpadding="0" cellspace="0"> 
<tbody> 
<tr> 
<td id="demo1" valign="top"><table bgcolor="#fffbf7" border="0" cellpadding="0" cellspacing="0" width="322"> 
<tbody> 
<tr align="center"> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small01.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small02.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small03.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small06.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small05.jpg[/img]
</img> </td> 
</tr> 
</tbody> 
</table></td> 
<td id="demo2" valign="top"></td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
<div> 
<div id="demo_a" style="OVERFLOW: hidden; WIDTH: 322px; HEIGHT: 61px"> 
<table align="left" border="0" cellpadding="0" cellspace="0"> 
<tbody> 
<tr> 
<td id="demo_b" valign="top"><table bgcolor="#fffbf7" border="0" cellpadding="0" cellspacing="0" width="322"> 
<tbody> 
<tr align="center"> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small04.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small07.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small08.jpg[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small09.gif[/img]
</img> </td> 
<td height="50" width="50">[img]http://www.1sucai.cn/article/images/photo_small01.jpg[/img]
</img> </td> 
</tr> 
</tbody> 
</table></td> 
<td id="demo_c" valign="top"></td> 
</tr> 
</tbody> 
</table> 
</div> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：详解IOS开发之实现App消息推送（最新）
下一篇：JavaScript将页面表格导出为Excel的具体实现

资讯排行榜
更多>>