html滾動圖片怎麼首尾相連_html圖片無縫滾動代碼怎麼寫

Ⅰ 圖片首尾相接左右循環滾動代碼

<Center>
<table width="1024" border="0">
<tr>
<td height="200"><DIV id=demo style="OVERFLOW: hidden; WIDTH:1024px; HEIGHT: 200px"
align="center">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="250">
<img src="images/book/book1.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/book2.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/book3.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/book4.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/ling.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/shiya.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/leshi.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/hei.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/riben.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/xiaoyoushang.jpg" width="150" height="200"></td>
<td width="250"><img src="images/book/siwei.jpg" width="150" height="200"></td>
</table> </TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY>
</TABLE>
</DIV>
<div align="center">
<SCRIPT>
var speed=1
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.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
</div>
</td>
</tr>
</table>
</Center>

Ⅱ dreamweaver8中如何讓滾動的圖片首尾接起來

不管是在dreamweaver8還是在CS系列中，用marquee標簽，再配合JS腳本就可以實現！
我設計網站時常用這種高效的方法，下面是我原創的，而且經過優化的代碼，很多網友提問時也是用我的方法。
<marquee 屬性>要滾動的文字圖片</marquee>
但不管你用marquee的什麼屬性,都只能實現滾動效果,但不能實現首尾相接循環走馬燈效果（我摸索了很久）；你要實現首尾相接循環走動效果,那真的只有藉助JavaScript腳本，即是js代碼。
下面我給出一個結合marquee和JavaScript來實現首尾相接循環走動效果代碼及其實現方法:
1.首先你要先建一個文件夾，比如名為「gundong」的文件夾，再建兩個名為「js」和「images」的子文件夾。
2.用記事本將下面的js代碼復制進去，保存在js子文件夾下;文件名為scrollpic.js
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)}

3.用記事本將下面的html代碼復制進去，保存在gundong根文件夾下,文件名為index.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>http://hi..com/wibmj</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head>

<body>
<CENTER>
<TABLE style="BORDER: #ccc 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="images/pic_bg.jpg"><div align="center">1</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">
<p>2</p>
</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td>
</tr>
</table></TD>
<TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<script language=JavaScript src="js/scrollpic.js"></script>
</TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>
</BODY></HTML>

4.在images文件夾中法如一張名為pic_bg.jpg的圖片.

注意上面文件的文件名和後綴要保存正確，不要改動，如果改動了，就要修改代碼里的路徑才能正確顯示的，其實也不難。如果你要將這些效果轉移到ASP或其它編碼環境中，你可以復制上面HTML中的<TABLE>......</TABLE>標簽里的代碼，或者新建一個<DIV>圖層,再轉移過去，注意要根據實際情況修改js腳本文件的路徑，這種方法很奏效！

Ⅲ 網頁製作里怎樣使滾動圖片首尾連接起來

網站常用的向左滾動首尾相接
你可以把圖片銜接的路徑改成你電腦上的就行了.寬度,長度你可以自己改.

<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://www.22333.com/d/file/20081121/.gif"><td>
<td><img src="http://www.22333.com/d/file/20081121/.gif"><td>
<td><img src="http://www.22333.com/d/file/20081121/.gif"><td>
<td><img src="http://www.22333.com/d/file/20081121/.gif"><td>
<td><img src="http://www.22333.com/d/file/20081121/.gif"><td><td><img src="http://www.22333.com/d/file/20081121/.gif"><td>
<td><img src="http://www.22333.com/d/file/20081121/.gif"><td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1//速度數值越大速度越慢
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.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

Ⅳ html圖片無縫滾動代碼怎麼寫

marquee和js兩種方法，我建議使用js的，marquee兼容性不好，只兼容IE瀏覽器。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<metacharset="utf-8"/>
<TITLE>分別用marquee和div+js實現首尾相連循環滾動效果</TITLE>
</HEAD>
<BODY>
用marquee實現首尾相連循環滾動效果（僅IE）：<br/><br/>
<MARQUEEbehavior="scroll"contenteditable="true"onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"scrollamount="3"width="100"><SPANunselectable="on"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"></SPAN></MARQUEE>
<br/><br/>用DIV+javascript實現首尾相連循環滾動效果（兼容firefox）：<br/><br/>
<DIVid="scrollobj"style="white-space:nowrap;overflow:hidden;width:500px;"><span>這里是要滾動的內容</span></DIV>
<scriptlanguage="javascript"type="text/javascript">
<!--
	functionscroll(obj){
		vartmp=(obj.scrollLeft)++;
		//當滾動條到達右邊頂端時
		if(obj.scrollLeft==tmp)obj.innerHTML+=obj.innerHTML;
		//當滾動條滾動了初始內容的寬度時滾動條回到最左端
		if(obj.scrollLeft>=obj.firstChild.offsetWidth)obj.scrollLeft=0;
	}
	setInterval("scroll(document.getElementById('scrollobj'))",20);
//-->
</script>
</BODY>
</HTML>

望採納！

Ⅳ HTML，怎麼讓圖片首尾相連的滑動

用Marqueen的loop屬性來循環

Ⅵ Html中實現滾動新聞無間隔限制的代碼如何寫，比如上下滾動是首尾相接。

你說的是不是走馬燈的效果？直接在html的頁面寫的是用<marque>標簽來寫的，例如你說的新聞由上至下的滾動，其寫法是：<div><marquee
direction=top
onmouseover="this.stop()"
onmouseout="this.start()"
behavior=scroll>至上而下</marquee>></div>

Ⅶ MARQUEE 橫向滾動頭尾相接

如果你的要求不是太高的話，完全可以不必費那麼大力氣的。就用marquee，這樣：
<marquee ...>
<script language=javascript>
for(i=0;i<1000;i++)
document.writeln(這里是圖片的html);
</script>
</marquee>
也就是說，把marquee里的內容重復很多次，這樣就會變得很長，按一般的瀏覽習慣，是不會露出破綻的，除非你盯上十分二十分的等著。
很明顯，這是個假的，但是用這樣一段代碼實現這樣一個效果比起來還是很劃算的。

Ⅷ 網頁製作中如何製作幾張圖片首尾相連的往上滾動

無縫滾動吧？
[html]<style type=text/css>

</style>
向上滾動
<div id=demo>
<div id=demo1>
<a href=#><img src=http://www.cnrui.cn/other/link/Clear_logo.gif border=0 /></a>
<a href=#><img src=http://www.cnrui.cn/other/link/Clear_logo.gif border=0 /></a>
<a href=#><img src=http://www.cnrui.cn/other/link/Clear_logo.gif border=0 /></a>
<a href=#><img src=http://www.cnrui.cn/other/link/Clear_logo.gif border=0 /></a>
<a href=#><img src=http://www.cnrui.cn/other/link/Clear_logo.gif border=0 /></a>
</div>
<div id=demo2></div>
</div><script>

</script>
[/html]

Ⅸ 求一個html圖片頭尾相連橫向滾動代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>明氏燒餅案例展示</title>
<base href="http://www.mingshishaobing.com/inc" />
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<link href="../css/inc.css" rel="stylesheet" type="text/css" />

<style type="text/css">

</style>
</head>

<body>
<div id="left"><img src="../pic/case_l.gif" style="float:left;" alt="明氏燒餅案例展示" /></div>
<div id="right"><img src="../pic/case_r.gif" style="float:right;" alt="明氏燒餅案例展示" /></div>
<div id="demo" style="overflow: hidden; width: 960px;">

<table id="case">
<tr>
<td id="marquePic1">
<div style="height:110px;width:1470px;">
<a href="../Case.html" target="_blank"><img src="../img/case/i_ez_4.gif" alt="案例展示" /></a><a href="../Case.html" target="_blank"><img src="../img/case/i_fg_1.gif" alt="案例展示" /></a><a href="../Case.html" target="_blank"><img src="../img/case/i_ggz_3.gif" alt="案例展示" /></a><a href="../Case.html" target="_blank"><img src="../img/case/i_hg_1.gif" alt="案例展示" /></a><a href="../Case.html" target="_blank"><img src="../img/case/i_hx_3.gif" alt="案例展示" /></a><a href="../Case.html" target="_blank"><img src="../img/case/i_iggz_2.gif" alt="案例展示" /></a><a href="../Case.html" target="_blank"><img src="../img/case/i_jc_5.gif" alt="案例展示" /></a><a href="../Case.html" target="_blank"><img src="../img/case/i_ldl_5.gif" alt="案例展示" /></a><a href="../Case.html" target="_blank"><img src="../img/case/i_wyl_1.gif" alt="案例展示" /></a><a href="../Case.html" target="_blank"><img src="../img/case/i_xyj_3.gif" alt="案例展示" /></a></div>
</td>
<td id="marquePic2"></td>
</tr>
</table>

</div>

</body>
</html>
<script type="text/javascript">
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

----------------------

說明，裡面的基鏈接<base href="http://www.mingshishaobing.com/inc" /> 是為了讓你保存代碼後就可以直接看到效果。用時別忘了去掉。另外body里的前兩個div也可以去掉

導航:首頁 > 動漫圖片 > html滾動圖片怎麼首尾相連

html滾動圖片怎麼首尾相連

與html滾動圖片怎麼首尾相連相關的資料