html图片循环滚动无缝隙

举报该文章

相关建议 æ¨èäº2017-10-10

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">

</script>
</body>
</html>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/22qf87v27.html

其他看法

第1个回答 2015-10-15

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">

</script>
</body>
</html>

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

第2个回答 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">

</script>
</body>
</html>本回答被网友采纳

第3个回答 2015-10-03

<!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">

</script>
</body>
</html>

第4个回答 2013-05-14

单独的marquee是不具备无缝滚动的属性的需要js脚本才可以的！

html图片向左无缝隙循环滚动代码
用css3实现循环滚动效果：css：wrap{ width: 200px;height: 150px;border: 1px solid #000;position: relative;margin: 100px auto;overflow: hidden;} list{ position: absolute;left: 0;top: 0;margin: 0;padding: 0;animation: move 12s infinite linear;-webkit-animation: move 12s infinite...

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:h...

html怎么设置图片滚动播放
<DIV id=demo style="overflow: hidden; width: 600px; height: 190px; top:485px; left:252px;position: absolute;"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" id=demo1>  <table width="600" border="0" align="cen...

...让几个图片不断循环无间断(即中间没有空白)滚动的代码。最好详细一点...
<!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>图片滚动<\/...

图片从右向左无间隙滚动代码
--多个图片从这开始循环---><td width="180" align="center" style="border-right: dashed 1px #EFEFEF;"><table width="180" border="0" cellspacing="0" cellpadding="0"><tr><td height="110" align="center"><img src="" width="120" height="90" border="0" alt="" \/><\/...

html图片无缝滚动代码怎么写?
><HEAD><meta charset="utf-8" \/><TITLE>分别用marquee和div+js实现首尾相连循环滚动效果<\/TITLE><\/HEAD><BODY>用marquee实现首尾相连循环滚动效果（仅IE）：<br \/><br \/><MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;...

谁会html代码,我想让几张相片来回滚动显示怎么办???
那个不用javascrip也可以实现的，这个直接加到你想要让它显示的html代码下就可以了，如下 1)代码如下:这是让图片上下滚动的代码 <marquee behavior="alternate(上下滚动)[scroll" scrollamount(速度)="2" loop(这是显示循环次数[-1代表无限])="-1"direction="down(这表示图片从上往下开始)" width(...

如何在HTML页面中实现图片循环滚动
 <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" > <tr> <td width="200" align="center" style="height: 151px"> <a href="WebDeSign.aspx"> <img src="images\/indexpic1.gif" width="194" height="147" border="0...

marquee 中如何让图片进行无缝循环?
有个代码例子:<html> <body> <div id=demo style=overflow:hidden;height:95;width:500;> <table align=center cellpadding=0 cellspace=0 border=0> <tr> <td id=demo1 valign=top><a href='http:\/\/www.lijinran.com' target='_blank' title='网站名称：劲然的眼镜网站地址：http:\/\/...

如何用html实现文本+图片轮流滚动显示
就是无缝滚动用js就可以 1、打开Dreamweaver软件 2、代码如下：不要忘了引入js库 <!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...

相似回答

大家正在搜