html中如何實現圖片的無縫滾動

① html中怎麼實現無縫滾動

給你個例子吧，我這里運行很好，你根據你的需要進行適當的調整應該就可以用的。祝福你！
<div id="demo" style="overflow:hidden;height:141px;width:164px; text-align:left;" onmouseover="clearInterval(MyMar2);" onmouseout="MyMar2=setInterval(Marquee2,speed2);">
<div id="demo1">
<div align="left">滾動內容 <br><br>
</div><br><br>
</div>
<div id="demo2"></div>
</div>

<script>
var speed2=30;
demo2.innerHTML=demo1.innerHTML
function Marquee2()
{
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else
demo.scrollTop++;
}
var MyMar2=setInterval(Marquee2,speed2);
</script>
</div>

② html圖片向左無縫隙循環滾動代碼

用css3實現循環滾動效果：

css：

#wrap{

width:200px;

height:150px;

border:1pxsolid#000;

position:relative;

margin:100pxauto;

overflow:hidden;

}

#list{

position:absolute;

left:0;

top:0;

margin:0;

padding:0;

animation:move12sinfinitelinear;

-webkit-animation:move12sinfinitelinear;

width:500%;

}

#listli{

list-style:none;

width:200px;

height:150px;

border:0;

float:left;

}

@-webkit-keyframesmove{

0%{

left:0;

}

100%{

left:-800px;

}

}

@keyframesmove{

0%{

left:0;

}

100%{

left:-800px;

}

}

#wrap:hover#list{

-webkit-animation-play-state:paused;/*動畫暫停播放*/

}

html：

<divid="wrap">

<ulid="list">

<li><ahref="#"><imgsrc="img/1.jpg"border="0"/></a></li>

<li><ahref="#"><imgsrc="img/2.jpg"border="0"/></a></li>

<li><ahref="#"><imgsrc="img/3.jpg"border="0"/></a></li>

<li><ahref="#"><imgsrc="img/4.jpg"border="0"/></a></li>

<li><ahref="#"><imgsrc="img/5.jpg"border="0"/></a></li>

</ul>

</div>

(2)html中如何實現圖片的無縫滾動擴展閱讀：

animation（動畫）屬性：

語法：

animation: name ration timing-function delay iteration-count direction fill-mode play-state;

參數：

1、animation-name：指定要綁定到選擇器的關鍵幀的名稱。

2、animation-ration：動畫指定需要多少秒或毫秒完成。

3、animation-timing-function：設置動畫將如何完成一個周期。

值：

linear：動畫從頭到尾的速度是相同的。

ease：默認。動畫以低速開始，然後加快，在結束前變慢。

ease-in：動畫以低速開始。

ease-out：動畫以低速結束。

ease-in-out：動畫以低速開始和結束。

cubic-bezier(n,n,n,n)：在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

4、animation-delay：設置動畫在啟動前的延遲間隔。

5、animation-iteration-count ：定義動畫的播放次數。

值：

n：一個數字，定義應該播放多少次動畫。

infinite：指定動畫應該播放無限次（永遠） 。

③ 【HTML】如何實現無縫循環的圖片滾動效果

網站中，有時為了更好的利用有限的頁面空間展示更多的內容，也為了豐富網站頁面自身的表現樣式，我們往往會用到圖片滾動的效果。想要實現這種效果，只需要在想要顯示的表格或網頁中加入以下代碼即可實現： <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0053_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0054_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0058_縮小大小.JPG" /> <img height="200" alt="" width="150" src="/lazysite/user_space/7788/CIMG0059_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0063_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0070_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0071_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0072_縮小大小.JPG" /> //這個圖片的地址可以是相對的也可以是絕對的 </td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>下面，我們就上面代碼的主要部分進行分析： <div id=demo style="overflow:hidden;height:100px;width:300px;"> 這段代碼中下劃線的部分表示我們這段滾動圖片所佔用區域的大小。用戶可根據頁面的實際需要進行調節。但一般情況下至少要大於或等於圖片的高度和寬度。 <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_縮小大小.JPG" /> 上面這段代碼是圖片的代碼。每加入一行如上代碼，那就會多出一個展示的圖片。圖片可以是一個，也可以是無數個。需要強調的是，每個圖片的高度和寬度應盡量的統一大小，主要顯示出來的效果才會更好看。 var speed=30 這行代碼是控制圖片滾動的速度。數字越小，滾動的也就越快；相反，數字越大，滾動的也就越慢。

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

marquee和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圖片無縫滾動怎麼實現

直接給你一段簡單的代碼，不懂再問
<html>
<head>
<title>圖片滾動 </title>
<style>
#div1
{position:relative;width:650px;height:210px;overflow:hidden;
}
#div2{position:absolute;}
li{float:left;list-style-type:none;padding:5px;}
img{border:none;}
#div2 li a:hover{top:-10px;}
a{position:relative;}
</style>
<script>
window.onload=function()
{
var odiv2=document.getElementById('div2');
var ali=odiv2.getElementsByTagName('li');
var aspeed=-5;
var timer=null;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali[0].offsetWidth*ali.length+'px';
odiv2.onmouseover=function(){clearInterval(timer);};
function a()
{
timer=setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+aspeed+'px';
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{
odiv2.style.left='0px';
}
},30);};
odiv2.onmouseout=a;
a();
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<li><a href=""><img src="1.jpg" /></a></li>
<li><a href=""><img src="2.jpg" /></a></li>
<li><a href=""><img src="3.jpg" /></a></li>
<li><a href=""><img src="4.jpg" /></a></li>
</div>
</div>
</body>
</html>

⑥ HTML 無縫文字滾動怎麼做

上下無縫滾動代碼：
<div id="demo" style="height:50px;overflow:hidden;">
<div id="indemo" style="height:200%;">
<div id="demo1">
第一行字<br />
第二行字
</div>
<div id="demo2"></div>
</div>
</div>
</body>
<script type="text/javascript">
speed = 100; //數字越大滾得越慢
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
tab.scrollTop = tab1.offsetHeight;
function Marquee(){
if (tab.scrollTop >= tab1.offsetHeight) {
tab.scrollTop-=tab2.offsetHeight;
}else{
tab.scrollTop+=1;
}
}
var MyMar=setInterval(Marquee,speed);
</script>

左右橫向無縫滾動代碼

<table cellSpacing=0 cellPadding=0 width=100 align=center border=0>
<tr>
<td width=190 bgColor=#d6f6fd height=27></td>
<td bgColor=#d6f6fd height=27>
<marquee onmouseover=this.stop() onmouseout=this.start() scrollAmount=2 scrollDelay=60 width=580 height=20>
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果2 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果3 [ 7/10/2012]
</marquee>
</td>
</tr>
</table>

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

/*圖片滾動*/

#marquee {background: #FFF;overflow:hidden;width:350px; margin:10px 11px 0 11px;}

#inmarquee {float: left;width: 800%;}

#marquee1 {float: left;}

#marquee2 {float: left;}

</style>

<script type="text/javascript">

/*以下是圖片滾動區*/

var speed=20;

var tab=document.getElementById("marquee");

var tab1=document.getElementById("marquee1");

var tab2=document.getElementById("marquee2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth//水平移動的距離和可見區域的寬度

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

</script>

</head>

<body>

<div class="left">

<!--圖片滾動-->

<div id="marquee">

<div id="inmarquee">

<div id="marquee1">

<a href="#"><img src="../images/13.jpg" border="0"></a>

<a href="#"><img src="../images/14.jpg" border="0"></a>

<a href="#"><img src="../images/8_03.gif" border="0"></a>

<a href="#"><img src="../images/15.jpg" border="0"></a>

</div>

<div id="marquee2">

<a href="#"><img src="../images/13.jpg" border="0"></a>

<a href="#"><img src="../images/14.jpg" border="0"></a>

<a href="#"><img src="../images/8_03.gif" border="0"></a>

<a href="#"><img src="../images/15.jpg" border="0"></a>

<!--以下代碼和marquee1是一樣的，完全可以省略-->

</div>

</div>

</div>

<script>

var speed=20;//滾動的速度

var tab=document.getElementById("marquee");

var tab1=document.getElementById("marquee1");

var tab2=document.getElementById("marquee2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

// clearInterval() 方法可以取消該周期性的方法調用。

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

</script>

<!--以上為圖片滾動-->

</body>

</html>

注意：圖片可以自己找幾張，粘貼的時候注意圖片路勁

⑧ html圖片循環滾動無縫隙

1、准備好圖片素材和網頁工具以及上傳工具；

2、html圖片循環滾動無縫隙實現效果的代碼：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

<htmlxmlns="

<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>無標題文檔</title>
<styletype="text/css">
/*gundongtupian*/
#demo0{
width:712px;
height:134px;
overflow:hidden;
margin:auto;
}
#demo0img{
float:left;
margin-left:10px;
border:3px#ffffffsolid;
}
#indemo0{
float:left;
width:800%;
}
#demo10{
float:left;
}
#demo20{
float:left;
}
</style>
</head><body>
<divid="demo0">
<divid="indemo0">
<divid="demo10">
<ahref="#"><imgsrc="images/tu1.jpg"width="167"height="128"border="0"/></a>
<ahref="#"><imgsrc="images/tu1.jpg"width="168"height="128"border="0"/></a>
<ahref="#"><imgsrc="images/tu1.jpg"width="168"height="128"border="0"/></a>
<ahref="#"><imgsrc="images/tu1.jpg"width="168"height="128"border="0"/></a>
<ahref="#"><imgsrc="images/tu1.jpg"width="168"height="128"border="0"/></a>
</div>
<divid="demo20"></div>
</div>
</div>
<scriptlanguage="javascript">
<!--
varspeed0=40;//數字越大速度越慢
vartabb=document.getElementById("demo0");
vartabb1=document.getElementById("demo10");
vartabb2=document.getElementById("demo20");
tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML;
functionMarquee2(){
if(tabb2.offsetWidth-tabb.scrollLeft<=0)
tabb.scrollLeft-=tabb1.offsetWidth;
else{
tabb.scrollLeft++;
}
}
varMyMar2=setInterval(Marquee2,speed0);
tabb.onmouseover=function(){clearInterval(MyMar2)};
tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)};
-->
</script>
</body>
</html>

3、保存成為.html的網頁，然後通過ftp上傳到伺服器上。