html图片循环滚动无缝隙

<tr><tdwidth="107"height="132"rowspan="2"background="../../水印/套装/切片2/images/公告02_02.j... <tr>
<td width="107" height="132" rowspan="2" background="../../水印/套装/切片2/images/公告02_02.jpg"> </td>
<td width="610" height="128" valign="top"><marquee scrollamount=4 scrolldelay=3 valign=middle behavior="scroll"onmouseover="this.stop()" onmouseout="this.start()"> <img src="../../水印/套装/切片2/实物图/02.jpg" width="128" height="128"><img src="../../水印/套装/切片2/实物图/03.jpg" width="128" height="128"><img src="../../水印/套装/切片2/实物图/01.jpg" width="128" height="128"><img src="../../水印/套装/切片2/实物图/04.jpg" width="128" height="128"><img src="../../水印/套装/切片2/实物图/06.jpg" width="128" height="128"></marquee> </td> 展开
 我来答
5个回答
#热议# 普通体检能查出癌症吗？
电商达人秀
高粉答主

推荐于2017-10-10 · 电商领域的一个老炮！
电商达人秀
采纳数：17961 获赞数：148061

向TA提问 私信TA
展开全部
html图片循环滚动无缝隙代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*gundongtupian*/
#demo0 {
width:712px;
height:134px;
overflow:hidden;
margin:auto;
}
#demo0 img {
float:left;
margin-left:10px;
border:3px #ffffff solid;
}
#indemo0 {
float: left;
width: 800%;
}
#demo10 {
float: left;
}
#demo20 {
float: left;
}
</style>
</head><body>
<div id="demo0">
<div id="indemo0">
<div id="demo10">
<a href="#"><img src="images/tu1.jpg" width="167" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
</div>
<div id="demo20"></div>
</div>
</div>
<script language="javascript">
<!--
var speed0=40; //数字越大速度越慢
var tabb=document.getElementById("demo0");
var tabb1=document.getElementById("demo10");
var tabb2=document.getElementById("demo20");
tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML;
function Marquee2(){
if(tabb2.offsetWidth-tabb.scrollLeft<=0)
tabb.scrollLeft-=tabb1.offsetWidth;
else{
tabb.scrollLeft++;
}
}
var MyMar2=setInterval(Marquee2,speed0);
tabb.onmouseover=function(){clearInterval(MyMar2)};
tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)};
-->
</script>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
创业者李孟
高粉答主

2015-10-15 · 数码领域创作者
个人认证用户
创业者李孟
采纳数：7947 获赞数：39410

向TA提问 私信TA
展开全部

1、准备好图片素材和网页工具以及上传工具；

2、html图片循环滚动无缝隙实现效果的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 

<html xmlns=" 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*gundongtupian*/
#demo0 { 
    width:712px;
 height:134px;
 overflow:hidden;
 margin:auto;
} 
#demo0 img { 
    float:left;
 margin-left:10px;
 border:3px #ffffff solid;
}
#indemo0 { 
    float: left; 
    width: 800%; 
} 
#demo10 { 
    float: left; 
} 
#demo20 { 
    float: left; 
}
</style>
</head><body>
<div id="demo0"> 
  <div id="indemo0"> 
      <div id="demo10">
      <a href="#"><img src="images/tu1.jpg" width="167" height="128" border="0" /></a>
      <a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
      <a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
      <a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
      <a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
      </div> 
      <div id="demo20"></div> 
  </div> 
</div>
<script language="javascript"> 
<!-- 
var speed0=40; //数字越大速度越慢 
var tabb=document.getElementById("demo0"); 
var tabb1=document.getElementById("demo10"); 
var tabb2=document.getElementById("demo20"); 
tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML; 
function Marquee2(){
  if(tabb2.offsetWidth-tabb.scrollLeft<=0) 
  tabb.scrollLeft-=tabb1.offsetWidth;
  else{ 
  tabb.scrollLeft++; 
  } 
} 
var MyMar2=setInterval(Marquee2,speed0); 
tabb.onmouseover=function(){clearInterval(MyMar2)}; 
tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)}; 
--> 
</script>
</body>
</html>

3、保存成为.html的网页，然后通过ftp上传到服务器上。

已赞过 已踩过<
你对这个回答的评价是？
评论 收起
匿名用户
2013-05-14
展开全部
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*gundongtupian*/
#demo0 {
width:712px;
height:134px;
overflow:hidden;
margin:auto;
}
#demo0 img {
float:left;
margin-left:10px;
border:3px #ffffff solid;
}
#indemo0 {
float: left;
width: 800%;
}
#demo10 {
float: left;
}
#demo20 {
float: left;
}
</style>
</head><body>
<div id="demo0">
<div id="indemo0">
<div id="demo10">
<a href="#"><img src="images/tu1.jpg" width="167" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
</div>
<div id="demo20"></div>
</div>
</div>
<script language="javascript">
<!--
var speed0=40; //数字越大速度越慢
var tabb=document.getElementById("demo0");
var tabb1=document.getElementById("demo10");
var tabb2=document.getElementById("demo20");
tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML;
function Marquee2(){
if(tabb2.offsetWidth-tabb.scrollLeft<=0)
tabb.scrollLeft-=tabb1.offsetWidth;
else{
tabb.scrollLeft++;
}
}
var MyMar2=setInterval(Marquee2,speed0);
tabb.onmouseover=function(){clearInterval(MyMar2)};
tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)};
-->
</script>
</body>
</html>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
郭某人来此
2015-10-03 · TA获得超过1646个赞
知道答主
回答量：952
采纳率：100%
帮助的人：90.3万
我也去答题访问个人页
展开全部
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*gundongtupian*/
#demo0 {
width:712px;
height:134px;
overflow:hidden;
margin:auto;
}
#demo0 img {
float:left;
margin-left:10px;
border:3px #ffffff solid;
}
#indemo0 {
float: left;
width: 800%;
}
#demo10 {
float: left;
}
#demo20 {
float: left;
}
</style>
</head>
<body>
<div id="demo0">
<div id="indemo0">
<div id="demo10">
<a href="#"><img src="images/tu1.jpg" width="167" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>
</div>
<div id="demo20"></div>
</div>
</div>
<script language="javascript">
<!--
var speed0=40; //数字越大速度越慢
var tabb=document.getElementById("demo0");
var tabb1=document.getElementById("demo10");
var tabb2=document.getElementById("demo20");
tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML;
function Marquee2(){
if(tabb2.offsetWidth-tabb.scrollLeft<=0)
tabb.scrollLeft-=tabb1.offsetWidth;
else{
tabb.scrollLeft++;
}
}
var MyMar2=setInterval(Marquee2,speed0);
tabb.onmouseover=function(){clearInterval(MyMar2)};
tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)};
-->
</script>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
匿名用户
2013-05-14
展开全部
单独的marquee是不具备无缝滚动的属性的需要js脚本才可以的！
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（3）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式