當前位置:首頁 » 圖片效果 » 靜態網頁中怎樣實現圖片滾動效果
擴展閱讀
照片怎樣拼一起 2025-09-10 11:29:36

靜態網頁中怎樣實現圖片滾動效果

發布時間: 2022-07-14 06:53:49

A. 網頁製作怎樣讓圖片滾動

這個軟體還真沒用過 直接加段代碼不行嗎?用 marqueemarquee 參數: BGColor:滾動文本框的背景顏色。 Direction:滾動方向設置,可選擇Left、Right、up和down。 scrolldelay:每輪滾動之間的延遲時間,越大越慢。 scrollamount:一次滾動總的時間量,數字越小滾動越慢。 Behaviour:滾動的方式設置,三種取值:Scroll(循環滾動) lide(單次滾動)、Alternate(來回滾動)。 Align:文字的對齊方式設置。可選擇Middle(居中)、Bottom(居下)還是Top(居上)。 Width:滾動文本框的寬度,輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。 Height:滾動文本框的高度,輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。 loop:滾動次數。默認為infinite hspace、vspace:前後、上下的空行。 滾動字幕在FrontPage的組件里有,但是FrontPage這個軟體只能支持單行文字,一出現多行文字它就無能為力了,而且它只能支持一行滾動!(如果出現只能滾動一行的情況,解決辦法是把這段代碼嵌入到JavaScript的document.write裡面,請看下面例d的詳細說明)Dreamweaver也只能用編寫HTML代碼的方法。所以強烈建議用記事本打開網頁源代碼來編輯。 建立第一個滾動字幕。代碼: <marquee scrollAmount=2 width=300靚麗風景線</marquee

B. 如何在靜態網頁中製作背景中的一幅圖片隨流輪的滾動而上下滾動

把style里的屬性設置一下,那個屬性叫什麼我忘了,你用查查看

C. 網頁製作圖片滾動

<marqueedirection=upheight=75onMouseOut=this.start()onMouseOver=this.stop()scrollamount=1scrolldelay=100width="180"id=MARQUEE1>滾動內容</marquee>
Direction參數可設置:updownleftright(控制滾動方向)
Scrolldelay=100(100就是速度,值越大滾動越快……)
onMouseOut=this.start()........滑鼠移出狀態滾動
onMouseOver=this.stop().........滑鼠經過時停止滾動
基本語法
<marquee>...</marquee>
移動屬性的設置,這種移動不僅僅局限於文字,也可以應用於圖片,表格等等
方向
<direction=#>#=left,right,up,down<marqueedirection=left>從右向左移!</marquee>
方式
<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>一圈一圈繞著走!</marquee>
<marqueebehavior=slide>只走一次就歇了!</marquee>
<marqueebehavior=alternate>來回走</marquee>
循環
<loop=#>#=次數;若未指定則循環不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3趟</marquee><P>
<marqueeloop=3width=50%behavior=slide>只走3趟</marquee>
<marqueeloop=3width=50%behavior=alternate>只走3趟!</marquee>
速度
<scrollamount=#><marqueescrollamount=20>啦啦啦,我走得好快喲!</marquee>
延時
<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦,我走一步,停一停!</marquee>
外觀(Layout)設置
對齊方式(Align)
<align=#>#=top,middle,bottom<fontsize=6>
<marqueealign=#width=400>啦啦啦,我會移動耶!</marquee>
</font>
底色
<bgcolor=#>#=rrggbb16進制數碼,或者是下列預定義色彩:
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marqueebgcolor=aaaaee>顏色!</marquee>
面積
<height=#width=#><marqueeheight=40width=50%bgcolor=aaeeaa>面積!</marquee>
空白
(Margins)<hspace=#vspace=#>
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>面積!</marquee>

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

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

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

切換至代碼編輯界面,輸入如下代碼:

<body><div id="photo-list"> <ul id="scroll">
<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li>


<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li> </ul> </div></body>

新建一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"中添加對該樣式表的引用:

<link rel="stylesheet" type="text/css" href="MyStyle.css">

新建一個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」文件的引用。

<script type="text/javascript" src="MoveEffect.js"></script>

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

E. 靜態網頁里的圖片滾動代碼誰知道!!!

圖片滾動代碼 (從右向左滾動) <marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> <img border="0" src=" http://要滾動的圖片地址1"> <img border="0" src=" http://要滾動的圖片地址2"> </marquee> 圖片滾動代碼 (從下往上滾動) <marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> <img border="0" src=" http://要滾動的圖片地址1"> <img border="0" src=" http://要滾動的圖片地址2"> </marquee> 如果你在QQ空間用的話,可能不行,因為現在的QQ空間不給用代碼了,應用到網頁中是可以的...

F. 靜態網頁圖片滾動問題

把你上面的代碼發一下。
另外,不看代碼我猜的可能是:命名沖突了,你引用的js可能無法同時匹配2個相同的類/id名(你自己都說是復制下來的了)

G. 如何實現網頁圖片滾動播放

1、網頁圖片滾動一般都是網路上查找jq/js插件,引入到自己的html代碼里頭,或者是里頭本身寫好的例子,修改好數據源圖片,運行調試即可
2、如果是不考慮圖片首尾無縫滾動的話,你還可以使用marquee.
這個是html自帶滾動標簽,也可以實現滑鼠移入停止,移開開始滾動等等,如下:
<marquee direction="up" onmouseover="this.stop();" onmouseout="this.start();"> <img src="xxx.jpg" /> <img src="xxx.jpg" /> <img src="xxx.jpg" /> <img src="xxx.jpg" />
</marquee>
具體其他更多屬性用法,可以查找下這個標簽的用法,
提供個參考資料:http://www.jb51.net/article/724.htm

H. 網頁中的圖片滾動效果是怎麼實現的啊

設置層高,比如position:absoulute; z-index:999; top:100px; right:0px;

示例用法:

<html>

<head><title>123</title></head>

<body style="width:1024px; height:2000px;">

<p style="width:100px; height:100px; background-color:red;position:fixed; z-index:999; top:100px; right:0px;">

<img src="圖片地址" />

<p>

</body>

</html>

圖片中的P標簽里有圖片,我這里設置P區塊為寬高各100,用position:fixed定位,距離頂部100像素,右邊0像素漂浮著,z-index:999就是層高,可以理解為層高越高就可以漂浮在網頁上面。

效果如下:

不管如何滾動網頁滾動條 上下翻 左右翻都一直在屏幕距離頂部100像素,右邊0像素漂浮著。

I. 靜態網頁中相冊的左右滾動怎麼做

marquee 雖然能實現,但沒JS的好 以下是無縫滾動 <div id="demo0" style="overflow: hidden; width:685px; margin:0 auto;"> <table cellpadding="0" align="left" border="0" cellspacing="0"> <tr> <td id="demo1" valign="top" style="height: 134px"> <table cellpadding="0" cellspacing="0"> <tr> <td> <table border="0" cellpadding="20" cellspacing="20" > <tr> <td><img src="" /></td> <td><img src="" /></td> <td><img src="" /></td> <td><img src="" /></td> <td><img src="" /></td> <td><img src="" /></td> </tr> </table> </td> </tr> </table> </td> <td id="demo2" valign="top" style="height: 134px"></td> </tr> </table> </div> <!-- 滾動Javasript --> <script type="text/javascript" language="JavaScript"> //調用向左滾動函數 toleft("demo0","demo1","demo2",1,"") function $(id){return document.getElementById(id)} /** 向左滾動時調用的函數 demo1、demo2包含在demo中 speed是圖片滾動的速度 flag一個網頁內有多個時設置為不同的任意字元。 */ function toleft(demo,demo1,demo2,speed,flag){ demo=$(demo);demo1=$(demo1);demo2=$(demo2) demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0){ demo.scrollLeft-=demo1.offsetWidth } else{ demo.scrollLeft++ } } flag=setInterval(Marquee,speed) demo.onmouseover=function(){clearInterval(flag);} demo.onmouseout=function(){flag=setInterval(Marquee,speed);} } </script>

希望採納