如何把網頁的圖片滑動

『壹』 如何實現網頁圖片滾動播放

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

『貳』 如何實現網頁中一行圖片連續橫向滾動

分類: 電腦/網路 >> 程序設計 >> 其他編程語言
問題描述:

如果使用marquee標簽，雖然可以實現圖片滾動，但只有當全部圖片滾動1次後，第2次滾動才開始，這樣就不連續了，有沒有辦法讓圖片滾動連續起來？也就是說讓兩次滾動的圖片首尾相接不間斷。望高手賜教！用js也行。

解析:

只能用JS,

<!-簡便型logo圖片橫向滾動代碼-><br><br>

<script language="JavaScript1.2">

<!--

var sliderwidth=550

var sliderheight=31

var slidespeed=4

var leftrightslide=new Array()

var finalslide=''

leftrightslide[0]='<a href="nknucc.nknu.e/~s1378/wjs-4"><img src=nknucc.nknu.e/~s1378/logo030.gif border=1></a>'

leftrightslide[1]='<a href="nknucc.nknu.e/~s1378/wjs-13"><img src=nknucc.nknu.e/~s1378/logo032.gif border=1></a>'

leftrightslide[2]='<a href="nknucc.nknu.e/~s1378/wjs-27000"><img src=nknucc.nknu.e/~s1378/logo034.gif border=1></a>'

leftrightslide[3]='<a href="nknucc.nknu.e/~s1378/wjs-11-gfm"><img src=nknucc.nknu.e/~s1378/logo031.gif border=1></a>'

var speed=slidespeed

for (i=0;i<leftrightslide.length;i++)

finalslide=finalslide+leftrightslide+" "

if (document.all){

document.write('<marquee id="ieslider" scrollAmount=0 class="page_speeder_1619037892">'+finalslide+'</marquee>')

ieslider.onmouseover=new Function("ieslider.scrollAmount=0")

ieslider.onmouseout=new Funct ion("if (document.readyState=='plete') ieslider.scrollAmount=slidespeed")

}

function regenerate(){

window.location.reload()

}

function regenerate112(){

if (documentyers){

document.ns_slider01.visibility="show"

setTimeout("window.onresize=regenerate",450)

intializeleftrightslide()

}

if (document.all)

ieslider.scrollAmount=slidespeed

}

function intializeleftrightslide(){

document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')

document. ns_slider01.document.ns_slider02.document.close()

thelength=document.ns_slider01.document.ns_slider02.document.width

scrollslide()

}

function scrollslide(){

if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){

document.ns_slider01.document.ns_slider02.left-=slidespeed

setTimeout("scrollslide()",100)

}

else{

document.ns_slider01.document.ns_slider02.left=sliderwidth

scrollslide()

}

}

window.onload=regenerate112

-->

</script>

<ilayer width=&{sliderwidth}; height=&{sliderheight}; name=ns_slider01 visibility=hide>

<layer name=ns_slider02 onMouseover="slidespeed=0;" onMouseout="slidespeed=speed">

</layer>

</ilayer>

還有一個方法晚些時候告訴你,更簡單的.我正在測試!

『叄』 html怎麼設置滾動圖片

方案一：直接使用HTML的滾動標簽 marquee ，把圖片放入滾滾標簽內部，代碼如下：

<marquee>

<img src='1.jpg'>

<img src='2.jpg'>

<img src='3.jpg'>

<img src='4.jpg'>

</marquee>

方案二：使用第三方插件，比如swiper.js，

插件

『肆』 網頁製作怎樣讓圖片滾動

這個軟體還真沒用過 直接加段代碼不行嗎？用 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

『伍』 網頁製作圖片滾動

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

『陸』 網頁中的圖片滾動效果是怎麼實現的啊

設置層高，比如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像素漂浮著。

『柒』 怎麼用網頁製作做出圖片滾動效果大神們幫幫忙

1.<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount="2"散源 direction="up" behavior="scroll">把你的內容放這里<睜掘此/marquee>這個代碼是比較簡單的示例，會有空白，如果不想有空白的話還是需要JS的。 2.<MARQUEE scrollAmount=1 scrollDelay=1 direction=right width=180 height=250><IMG src="圖片網址" width=180 border=0> <IMG src="圖片網址悉迅" width=180 border=0> <IMG src="圖片網址" width=180 border=0> <IMG src="圖片網址" width=180 border=0> <IMG src="圖片網址" width=180 border=0> <IMG src="圖片網址" width=180 border=0> <DIV></DIV></MARQUEE></CENTER> 數值可以變換，數值的變換可以影響圖片速度的滾動！圖片滾動方向也可以換！都是簡單的英語單詞，大家在變換的時候應該沒有問題 上下滾動圖片代碼: 代碼：<CENTER> <MARQUEE scrollAmount=1 scrollDelay=1 direction=up width=170 height=250> <DIV align=center><IMG src="圖片網址" width=300 border=0></DIV> <DIV align=center><IMG src="圖片網址" width=300 border=0></DIV> <DIV align=center><IMG src="圖片網址" width=300 border=0></DIV> <DIV align=center><IMG src="圖片網址" width=300 border=0></DIV> <DIV align=center><IMG src="圖片網址" width=300 border=0></DIV> <DIV align=center><IMG src="圖片網址" width=300 border=0></DIV></MARQUEE></CENTER> 註：direction方向 可UP可DOWN 寬高 可以換

『捌』 怎麼能讓html網頁圖片滾動起來，而且居中

html網頁圖片滾動方法如下：
1把圖片樣式的position屬性設置為static，
2然後指定固定的位置，就可以了。

tml網頁圖片居中方法如下：
第一種方法：
設置父元素內文字居中即可讓圖片居中。
element{ text-align:center; }
第二種方法：
設置圖片為塊級元素，設置左右margin為auto即可讓圖片居中。
img{ display:block;margin-left:auto;margin-right:auto; }