html滾動圖片代碼簡單_html 圖片滾動代碼

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

</ul>

</div>

(1)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：指定動畫應該播放無限次（永遠）。

B. HTML圖片滾動的代碼

你的結構寫錯了，<html><head><title></title></head><body><script>
var speed=30//速度數值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function() {clearInterval(MyMar4)}
butong_net_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<div id="butong_net_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="imags/1.jpg" width="100" height="133"></td>
<td><img src="imags/2.jpg" width="100" height="133"></td>
<td><img src="imags/3.jpg" width="100" height="133"></td>
<td><img src="imags/4.jpg" width="100" height="133"></td>
<td><img src="imags/5.jpg" width="100" height="133"></td>
</tr>
</table>
</td>
<td id="butong_net_right2" valign="top"></td>
</tr>
</table>
</body></html>

C. html 圖片滾動代碼

<div id="gpic" style="overflow:hidden; width:600px; height:182px;">

<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="gpic1" valign="top" align="center"><table width="974" border="0" align='center' cellpadding="0" cellspacing="0">
<tr>
<td height="120" bgcolor="#FF00FF">圖片/鏈接</td>
<td valign='top' bgcolor="#00FFFF">圖片/鏈接</td>
<td valign='top' bgcolor="#FFFF00">圖片/鏈接</td>
<td valign='top' bgcolor="#0000FF">圖片/鏈接</td>
<td valign='top' bgcolor="#00FF00">圖片/鏈接</td>
<td valign='top' bgcolor="#FF0000">圖片/鏈接</td>
</tr>
<tr>
<td height="24" align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
</tr>
</table></td>
<td id="gpic2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30
gpic2.innerHTML=gpic1.innerHTML
function Marquee(){
if(gpic2.offsetWidth-gpic.scrollLeft<=0)
gpic.scrollLeft-=gpic1.offsetWidth
else{
gpic.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
gpic.onmouseover=function() {clearInterval(MyMar)}
gpic.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

D. 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>

望採納！

E. 求一純HTML圖片滾動代碼

不用腳本不可能實現

F. html滾動圖片代碼

你把正面的代碼弄到HTML文件的<body>區應該就行了：
<div id="ShowDiv" style="position:relative; overflow:hidden; width:306px; height:102px;">
<div id="div1" style="position:absolute; width: 310px; height: 103px;">
<img src="圖片地址1" width="100" height="100" />
<img src="圖片地址2" width="100" height="100" />
<img src="圖片地址3" width="100" height="100" />
</div>
</div>
<script type='text/javascript'>
var adiv=document.getElementById('div1');
var imgs=document.getElementsByTagName('img');
adiv.style.width=620+'px';
adiv.innerHTML+=adiv.innerHTML;
setInterval(function()
{
adiv.style.left=adiv.offsetLeft-3+'px';
if(adiv.offsetLeft<-adiv.offsetWidth/2)
{
adiv.style.left=0+'px';
}
},10)
</script>

G. html圖片滾動代碼

調用「圖片」欄目圖片的向左滾動代碼（效果演示）
以下是首頁模板最新圖片部分代碼
-----------------------------------
<tr>
<td class=main_title_575><B>最新圖片</B></td>
</tr>
<tr>
<td class=main_tdbg_575 vAlign=center align=middle height=131>
 </td>
</tr>
------------------------------------

<div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px">
<table cellPadding=0 align=left border=0 cellspace="0">
<tr>
<td id=demo11 vAlign=top>
</td>
<td id=demo12 vAlign=top></td>
</tr>
</table>
</div>
<SCRIPT>
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
</SCRIPT>

-----------------------------------
注意滾動圖片數不要太大，這會影響頁面下載速度。

H. 如何在HTML中實現圖片的滾動效果

素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的。同理，小編也准備了一些與網頁主題密切相關的圖片，用於做為實現圖片滾動效果的素材。

打開Dreamweaver8，新建一網頁文件，並保存為名為「index.html"文件。

切換至代碼編輯界面，輸入如下代碼：

新建一CSS樣式表文件，並將該文件保存到與「index.html」相同的目錄下，文件名稱為「MyStyle.css"。

在新建的樣式表文件"MyStyle.css」文件中輸入如下代碼：

* { padding:0; margin:0;} /*設置所有對像的內邊距為0*/
body { text-align:center;} /*設置頁面居中對齊*/
#photo-list {
/* 6張圖片的寬度（包含寬度、padding、border、圖片間的留白）
計算：6*(100+2*2+1*2+9) - 9
之所以減去9是第6張圖片的右邊留白 */
width:681px;

/* 圖片的寬度（包含高度、padding、border）
計算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份將被隱藏*/

border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

在網頁文件"index.html"中添加對該樣式表的引用：

新建一個JS文件，並將該文件另存為「MoveEffect.js"。

在」MoveEffect.js「文件中輸入如下所示代碼：

var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {

var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //獲得每個img容器的寬度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //當 c.scrollLeft 和 width 相等時，把第一個img追加到最後面

ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //數值越大越慢
ul.style.width = width*itemCount + 'px'; //載入完後設置容器長度

var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};

然後在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用。

打開「index.html」網頁文件，最終效果如果所示：

I. 急求HTML圖片滾動代碼

<marquee scrollamount=3 behavior=alternate>
文字來回滾。
</marquee>

參數用法介紹
behavior=scroll, slide, alternate 跑馬方式：循環繞行，只跑一次就停住，來回往復運動
scrollamount=20 跑馬速度：數越大越快

J. html 一行滾動圖片的代碼

<div style="margin-top:20px;">
<div id="scroll_div" style="overflow: hidden; WIDTH: 778px;" align=center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="scroll_begin">
<a href="#"><img src="jsfile/imagesa32/gundong_11.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_01.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_02.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_03.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_04.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_05.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_06.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_07.jpg" border=0></a></td>
<td id="scroll_end"></td>
</tr>
</table>
</div></div>
<script>
var speed1=40
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee1(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else{
scroll_div.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed1)
scroll_div.onmouseover=function() {clearInterval(MyMar1)}
scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}
</script>

導航:首頁 > 好看圖片 > html滾動圖片代碼簡單

html滾動圖片代碼簡單

與html滾動圖片代碼簡單相關的資料