網頁設計slide_如何在網頁製作中將圖片設置為滾動

1、關於網頁設計中滾動欄的製作。。

看我這個，簡單的。

說明:1、你放的內容再多表面上會在Dreamweaver中撐破，但是在瀏覽器是正常
2、這個就是marquee的用法，height 、width定義了滾動的范圍，具體的你可以在百度查

<marquee direction=left height=100 scrollamount=1 scrolldelay=2 width=600>
這里放置要滾動的內容，表格、圖片、文字都可以
</marquee>

2、JS網頁設計裡面，輪播圖片，未設置初始值，想進入該網頁後，自動默認選定第一個切換如何增加函數。

試試這個圖片切換
有12345數字一起切換
滑鼠點一下數字會變換到另一張圖片，不點就會自動換
裡面有教程和源碼

3、網頁設計中如何設置兩張圖片每隔幾秒循環切換怎麼寫代碼

//下面是可配置輪播動畫代碼
$.fn.slide=function(options){
var defaults= {
affect:1, //1：上下滾動; 2:幕布式; 3:左右滾動；4：淡入淡出
time: 5000, //間隔時間
speed:500, //動畫快慢
dot_text:true,//按鈕上有無序列號
};
var opts=$.extend(defaults,options);

var $this=$(this);
var ool=$("<div class='dot'><p></p></div>");
var $box=$this.find("ul");
var $li=$box.find("li");
var timer=null;
var num=0;

$this.append(ool);
$box.find("li").each(function(i){
ool.find("p").append($("<b></b>"));
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur");
switch(opts.affect){
case 1:
break;
case 2:
$box.find("li").css("display","none");
break;
case 3:
$box.css({"width":$li.eq(0).width()*$li.length});
$li.css("float","left");
break;
case 4:
$box.find("li").css("display","none");
break;
}
$box.find("li").eq(0).show(0);
ool.find("b").mouseover(function(){
num=$(this).index();
run ();
})
timer=setInterval(auto,opts.time);
function auto(){
num<$box.find("li").length-1?num++:num=0;
run();
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed);
break;
case 2:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
break;
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed);
break;
case 4:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
break;
}
}
$this.mouseover(function(){
clearInterval(timer);
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time);
})
}
}(jQuery));

4、網頁製作圖片滾動

<marquee direction=up height=75 onMouseOut=this.start() onMouseOver=this.stop() scrollamount=1 scrolldelay=100 width="180" id=MARQUEE1>滾動內容</marquee>

Direction 參數可設置:up down left right (控制滾動方向)

Scrolldelay = 100 (100就是速度，值越大滾動越快……)

onMouseOut=this.start() ........滑鼠移出狀態滾動

onMouseOver=this.stop() .........滑鼠經過時停止滾動

基本語法
<marquee> ... </marquee>
移動屬性的設置 ,這種移動不僅僅局限於文字，也可以應用於圖片，表格等等

方向
<direction=#> #=left, right ,up ,down <marquee direction=left>從右向左移！</marquee>

方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈繞著走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>來回走</marquee>

循環
<loop=#> #=次數；若未指定則循環不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>

速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快喲！</marquee>

延時
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

外觀(Layout)設置

對齊方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我會移動耶！</marquee>
</font>

底色
<bgcolor=#> #=rrggbb 16 進制數碼，或者是下列預定義色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>顏色！</marquee>

面積
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面積！</marquee>

空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面積！</marquee>

5、如何在網頁製作中將圖片設置為滾動

1、素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的；

2、在電腦上找到並且打開Dreamweaver8，重新建立一個網頁文件，並且把網頁文件保存，且命名為「index.html"文件；

3、在完成網頁文件保存和命名為「index.html"文件以後，切換至代碼編輯界面，輸入相應的程序代碼；

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

5、在樣式表文件"MyStyle.css」文件的完成以後，打開樣式表文件"MyStyle.css」文件輸入相應的程序代碼；

6、在網頁文件"index.html"中添加對該樣式表的引用：「<link rel="stylesheet" type="text/css" href="MyStyle.css">」，同時新建一個JS文件，並將該文件另存為「MoveEffect.js"；

7、在JS文件」MoveEffect.js「文件建立完成以後，同樣打開JS文件」MoveEffect.js「文件輸入程序的代碼；

8、完成上述程序運行以後，在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用，「<script type="text/javascript" src="MoveEffect.js"></script>」，打開「index.html」網頁文件即可。

6、網頁設計字體滾動代碼？

文字滾動是由<marquee></marquee>控制的。marquee的參數如下：

1、方向 <direction=#> #=left, right
如：<marquee direction=left>啦啦啦，我從右向左移！</marquee>
<marquee direction=right>啦啦啦，我從左向右移！</marquee>

2、方式 <bihavior=#> #=scroll, slide, alternate
如：<marquee behavior=scroll>啦啦啦，我一圈一圈繞著走！</marquee>
<marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee>
<marquee behavior=alternate>啦啦啦，我來回走耶！</marquee>

3、循環 <loop=#> #=次數；若未指定則循環不止(infinite)
如：<marquee loop=3 width=50% behavior=scroll>啦啦啦，我只走 3 趟喲！</marquee>
<marquee loop=3 width=50% behavior=slide>啦啦啦，我只走 3 趟喲！</marquee>
<marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟喲！</marquee>

4、速度 <scrollamount=#>
如：<marquee scrollamount=20>啦啦啦，我走得好快喲！</marquee>

5、延時 <scrolldelay=#>
如： <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

6、對齊方式(Align) <align=#> #=top, middle, bottom
如：<font size=6>
<marquee align=# width=400>啦啦啦，我會移動耶！</marquee>
</font>
7、底色 <bgcolor=#>
#=rrggbb 16 進制數碼，或者是下列預定義色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

如：<marquee bgcolor=aaaaee>啦啦啦，我會移動耶！</marquee>

8、面積 <height=# width=#>
如：<marquee height=40 width=50% bgcolor=aaeeaa> 啦啦啦，我會移動耶！</marquee>

9、空白(Margins)<hspace=# vspace=#>

<marquee id="scrollarea" direction="up" scrolldelay="10" scrollamount="1" width="150" height="80" onmouseover="this.stop();" onmouseout="this.start();">
------------------------------------------------------------------------------------------------------------------------------

<marquee></marquee>

以下是一個最簡單的例子：

代碼如下:

<marquee><font size=+3 color=red>Hello, World</font></marquee>

下面這兩個事件經常用到：

onMouseOut="this.start()" ：用來設置滑鼠移出該區域時繼續滾動

onMouseOver="this.stop()"：用來設置滑鼠移入該區域時停止滾動

代碼如下:

<marquee >onMouseOut="this.start()" ：用來設置滑鼠移出該區域時繼續滾動：用來設置滑鼠移入該區域時停止滾動</marquee>

這是一個完整的例子：

代碼如下:

<marquee align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" >

這是一個完整的例子

</marquee>

該標簽支持的屬性多達11個：

align

設定<marquee>標簽內容的對齊方式

absbottom：絕對底部對齊（與g、p等字母的最下端對齊）

absmiddle：絕對中央對齊

baseline：底線對齊

bottom：底部對齊（默認）

left：左對齊

middle：中間對齊

right：右對齊

texttop：頂線對齊

top：頂部對齊

7、怎樣在網頁設計中把所需的文字從左到右滾動

14

<marquee>

width="300px"

height="200px"

behavior="scroll"

direction="left"

scrollamount="50"

loop="10"

限制滾動文字的范圍

限制滾動文字的范圍

限制滾動文字的行為（alternate：來回、scroll：循環滾動、slide：只滾動一次）

滾動的方向（left、right、down、up）

設置文字滾動的速度

設置滾動的次數
看看有用嗎？

8、網頁輪顯幻燈片是怎麼做的

用JS（JavaScript）+CSS或Applet做的；
不用什麼軟體。
透明漸變輪番顯示
製作方法：
在<head>標簽下，粘貼代碼：
<SCRIPT LANGUAGE="JavaScript">
// 設置輪番顯示速度 Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// 勻滑轉換時間 Duration of crossfade (seconds)
var crossFadeDuration = 3;
// 指定圖像文件 Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(ration=2)";
document.images.SlideShow.style.filter="blendTrans(ration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
修改body：
<body bgcolor="#FFFFFF" text="#000000" onLoad="runSlideShow()">
將表格單元格設置名稱「id=VU」：
<td id=VU>
在<img>中加入代碼：<img src="1.jpg" name='SlideShow'>

至此，我們的效果便製作好了。
製作方法：
1. 在<head>中插入代碼：
<script language='javascript'>
isns = navigator.appName == "Netscape";
//定義播放圖片張數
img1=new Image()
img2=new Image()
img3=new Image()
img4=new Image()
img5=new Image()
//圖片路徑、文件名
img1.src='images/circul-side.gif'
img2.src='images/css-manual.gif'
img3.src='images/kpt7.jpg'
img4.src='images/msn.jpg'
img5.src='images/ps-
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',4000)
}
</script>
可以在代碼中按照中文介紹，修改相關信息。
2. 在<body>中載入：<body onload="change_img();">
3. 插入第一張圖片，並命名：id="pic"
插入代碼：style='visibility:hidden;filter:revealtrans(ration=2.0,transition=12)'
參考圖片代碼：
<img src="images/circul-side.gif" name="pic" width="120" height="90" id="pic" style='visibility:hidden;filter:revealtrans(ration=2.0,transition=12)'>

製作完成。

觀看效果

使用CSS中的revealTrans濾鏡製作超弦圖片的播放
CSS 中有revealTrans濾鏡（具體介紹請參看巧用CSS的 RevealTrans 濾鏡），也曾用該濾鏡製作過各種圖片播放的效果（類似於使用CSS濾鏡revealTrans製作圖片漸顯效果）。知道其在網頁中製作特效非常有用處。這次，我們准備介紹另一種使用revealTrans濾鏡製作出超弦圖片播放的效果。
實現思路：使用revealTrans濾鏡製作出超弦圖片播放的效果，並每張圖片有各自的鏈接地址。
製作方法：
1、在<head>中插入JS代碼：
<SCRIPT language=JavaScript1.2>
function reapply(){
setTimeout("slideit()",800)
return true
}
window.onerror=reapply
</SCRIPT>
<SCRIPT language=JavaScript1.1>

</SCRIPT>
其中：images/big 完整代碼：<img src="images/circul-side.gif" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide>
4、給圖片加超鏈接：<a href="javascript :slidelink()">
5、加入代碼：
<SCRIPT>
 </STYLE>
步驟三
接下來立刻處理CSS的細節部分，還是在頁首標簽中插入JavaScript。在var numSLides =之後，設定要秀出的幻燈片數目（別設太多，因為每一張照片都會為網頁增加可觀的KB數）。我們的範例中有五張照片。以下是程序代碼：
<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
步驟四
如果你想加入圖片的解釋說明文字，可以用下列的程序代碼，將我們的說明文字換成你自己的說明文字：
var captionTxt = new Array(numSlides);
function setUpCaptions() {
captionTxt[1] = "39號碼頭入口。"
captionTxt[2] = "海獅在碼頭附近漫步。"
captionTxt[3] = "小船在碼頭*岸。"
captionTxt[4] = "水底世界鯨魚壁畫。"
captionTxt[5] = "海中小島或者是岩石。"
}
步驟五
將這里所示的程序代碼貼到你網頁中的HTML文件，位置就在JavaScript的說明文字下。因為Navigator 4.0和IE 4.0以不同的方式解讀CSS，我們的script就使用對象檢測（object detection）來決定呈現的模式。如果呈現的模式是Navigator，它還是可以定義某些特定的對象，使得IE程序代碼還是有作用。另外這也是整個程序代碼的結尾，所以一定要以</SCRIPT>標簽來作結束：
function setUp() {
if (!document.all) {
document.all = document;
for (i=1;i<=numSlides;i++) document.all[("image"+i)].
style=document.all[("image"+i)];
}
switchSlide(1);
}
function switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("image"+currentSlide)].
style.visibility="hidden";
// 如果不要說明文字，請移除下一行:
document.all["captions"].document.forCaptions.captionsText.
value=captionTxt[newSlide];
currentSlide = newSlide;
}
//-->
</script>

注意那些*近程序代碼結尾的註解：如果你沒有說明文字，那麼就將它下面一行的文字移除。
步驟六
以</HEAD>關閉頁首標簽，然後將下列的程序代碼，貼到網頁HTML文件中的body部分。注意，程序代碼以個別的<DIV>標簽區分每個影像，他們和正規的<IMG src>格式有關聯：
<BODY onLoad="setUp()">
<B> Builder.com slide show!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
步驟七
觀眾必須以自己的步調來點按幻燈片，所以你得提供他們點按的東西。。你可以使用簡單老式的超鏈接，但是若有特殊的Previous和Next的GIF點選按鈕，就精巧多了。樣本程序代碼是使用一個table來連接next.gif和previuos.gif：
<DIV style="position:absolute; top:350px; left:100px">
<A href="javascript :switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript :switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>
如果你不想用GIF文件來作Previous和Next點選按鈕，用文字取代上面的<IMG>標簽。
步驟八
最後，在<TEXTAREA>輸入欲顯現的說明文字。你可以隨意決定<TEXTAREA>的尺寸大小，只要改變rows=和cols=的數字即可。以下是程序代碼：
<DIV id="captions" style="position:absolute; left: 320px; top:75px">
<B>Picture caption</B>
<FORM name=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</FORM>
</DIV>

9、網頁製作中的滾動圖片是如何做出來的

圖片滾動代碼 (從右向左滾動)

<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img src="圖片 " alt="" />

<img src="圖片" alt="" />

</marquee>

圖片滾動代碼 (從下往上滾動)

<marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img src="圖片 " alt="" />

<img src="圖片" alt="" />

</marquee>

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

導航:首頁 > 萬維百科 > 網頁設計slide

網頁設計slide

與網頁設計slide相關的知識