網頁設計圖文滾動html代碼_網頁設計圖片滾動代碼

1、製作網頁中的滾動圖片，怎樣循環播放。

1.打開Dreamweaver創建新頁面，如圖：

2.插入如下代碼，如圖：

<%
set rs3=server.CreateObject("ADODB.RecordSet")
rs3.Source ="select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"
rs3.Open rs3.Source,conn,3,3
if not rs3.EOF Then
%>
<div align='center' id='demo' style='overflow:hidden;height:125px;width:990px;'>
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td id='demo1' valign='top'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<%
while not rs3.EOF
fileExt=lcase(getFileExtName(rs3("picname")))
%>
<td align='center'>
<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>
<TR>
<TD width=8 rowspan=3 > </TD>
<TD vAlign=top width=8><img src='Images/bg_0ltop.gif' width=10 height=10></TD>
<TD background=images/bg_01.gif></TD>
<TD vAlign=top width=7><img src='Images/bg_0rtop.gif' width=10 height=10></TD>
<TD width=7 rowspan=3 vAlign=top> </TD>
</TR>
<TR>
<TD background='Images/bg_03.gif'> </TD>
<TD align="center" bgcolor="#E9E9E9">
<%if fileext="jpg" or fileext="bmp" or fileext="png" or fileext="gif" then%>
<table style="TABLE-LAYOUT: fixed" height=80 cellSpacing=0 cellPadding=0 width=105 border=0>
<tr>
<td style="HEIGHT: 80px">
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><img src='<%=FileUploadPath & rs3("picname")%>' width='105' border=0></a>
</td>
</tr>
</table>
<%else if fileext="swf" then%>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='105' height='80'>
<param name=movie value='<%=FileUploadPath & rs3("picname")%>'>
<param name=quality value=high>
<param name='Play' value='-1'>
<param name='Loop' value='0'>
<param name='Menu' value='-1'>
<param name='wmode' value='transparent'>
<embed src='<%=FileUploadPath & rs3("picname")%>' width='105' height='80' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash'></embed>
</object>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'></a>
<%
end if
end If
%>
</TD>
<TD background='Images/bg_04.gif'> </TD>
</TR>
<TR>
<TD><img src='Images/bg_0lbottom.gif' width=10 height=10></TD>
<TD><img src='Images/bg_02.gif'></TD>
<TD><img src='Images/bg_0rbottom.gif' width=10 height=10></TD>
</TR>
<TR>
<TD> </TD>
<TD colspan=3 align=center height=20 valign='top' background='Images/bg_05.gif'>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><%=CutStr(htmlencode4(rs3("title")),14)%></a>
</TD>
<TD> </TD>
</TR>
</TABLE>
</td>
<%
rs3.MoveNext
wend
%>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<%if top_img >4 then%>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
<%
end if
else
Response.Write "暫無最新圖文"
end if
rs3.close
set rs3=nothing
%>

3.編寫完成代碼後查看預覽效果圖，如下：

注意事項:代碼中select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"根據網站的資料庫路徑來定義數據表，包括ID編號的降序和順序。

2、急求！！！網頁設計 HTML代碼大全

HTML標記_HTML大全_HTML標記大全_超文本標記語言
網頁（WebPage）文件主要是用超文本標記語言（HyperText Markup Language，簡稱HTML）語句來寫成。您可以通過IE瀏覽器的「查看」菜單中的「源文件」看到該頁的HTML代碼。HTML語言由一系列元素(element)組成，用於組織文件的內容和指導文件的輸出格式。元素名稱不分大小寫。一個元素可以有多個屬性，屬性及其屬性值不分大小寫。屬性名＝屬性值合起來構成一個完整的屬性，一個元素可以有多個屬性，各個屬性用空格分開。元素又由標記(tag)的構成，大多數標記是成對出現的，分起始標記< >(start tag)和結尾標記</ >(end tag)，以便和頁面的內容區分開來。其寫成的文件是標準的ASCII文件，不同於一般的編程語言，故稱為腳本（Script）更准確一點。其實也很簡單，特別是在專門的HTML編輯器的幫助下，您可以迅速地學會HTML，並能很快寫出有自己特色的Homepage來。
需要說明的是：各種瀏覽器對html元素及其屬性的解釋不完全一樣，如NC與IE是有區別的。
標簽內容備注
基本標簽所有HTML文件都有的
<html>……</html> 表示文件類型為HTML文檔
<head>……</head> 設置文檔描述及其他不在WEB網頁上顯示的信息
<body>……</body> HTML文檔的主體（頁面的實際內容）
標題標簽　
<title>……</title> 在標題欄中顯示的題目（放在<head></head>內）
擴展屬性標簽　
<base>
基址標簽，為解決相對編址作參考值
<META>
將HTTP命令發給CONTENT=number;url允許，描述不包含在標准HTML里的文檔信息。使用詳解

<link>
提供將現行文檔與其它文檔或實體關聯起來的信息
<ISINDEX> 指明在伺服器上提供文檔的可以檢索的索引
<style>……</style> 允許包含樣式表（CSS）信息
頁面屬性標簽 <body>……</body>標簽的擴展屬性。使用詳解

<body bgcolor=#……> 設置背景顏色，用名字或十六進制值
<body text=#……> 設置文本文字顏色，用名字或十六進制值
<body link=#……> 設置鏈接顏色，用名字或十六進制值
<body vlink=#……> 設置已使用的鏈接的顏色，用名字或十六進制值
<body alink=#……> 設置正在被擊中鏈接的顏色，用名字或十六進制值
文本標簽　
<pre>……</pre> 創建預格式化文本
<h1>……</h1> 創建最大的標題
<h6>……</h6> 創建最小的標題
<b>……</b> 創建黑體字
<i>……</i> 創建斜體字
<tt>……</tt> 創建打字機風格的字體
<cite>……</cite> 創建一個引用，通常是斜體
<em>……</em> 加重（通常是斜體加黑體）
<strong>……</strong> 強調（通常是斜體加黑體）
<font size=value></font> 設置字體大小，從1到7
<font color=……></font> 設置字體的顏色，使用名字或十六進制值
鏈接　
<a href="/URL"></a> 創建一個超鏈接
<a href="mailto:EMAIL"> </a> 創建一個自動發送電子郵件的鏈接
<a name="NAME"></a> 創建一個位於文檔內部的靶位
<a href="#NAME"></a> 創建一個指向位於文檔內部靶位的鏈接
格式排版　
<p> 創建一個新的段落
<p align=……> 將段落按左、中、右對齊
<br> 插入一個回車換行符
<blockquote>……</blockquote> 從兩邊縮進文本
<dl>……</dl> 創建一個定義列表
<dt> 放在每個定義術語詞之前
<dd> 放在每個定義之前
<ol>……</ol> 創建一個標有數字的列表
<li> 放在每個數字列表項之前，並加上一個數字
<ul>……</ul> 創建一個標有圓點的列表
<li> 放在每個圓點列表項之前，並加上一個圓點
<div align=……> 一個用來排版大塊HTML段落的標簽，也用於格式化表
圖形元素　
<img src="/name"> 添加一個圖像
<img src="/name" align=value> 排列對齊一個圖像：左中右或上中下
<img src="/name" border=value> 設置圍繞一個圖像的邊框的大小
<hr> 加入一條水平線
<hr size=value> 設置水平線的大小（高度）
<hr width=value> 設置水平線的寬度（百分比或絕對像素點）
<hr noshade> 創建一個沒有陰影的水平線
表格　
<table>……</table> 創建一個表格
<tr>……</tr> 開始表格中的每一行
<td>……</td> 開始一行中的每一個格子
<th>……</th> 設置表格頭：一個通常使用黑體居中文字的格子

表格屬性　
<table border=value> 設置圍繞表格的邊框的寬度
<table cellspacing=value> 設置表格格子之間空間的大小
<table cellpadding=value> 設置表格格子邊框與其內部內容之間空間的大小
<table width=value 或 %> 設置表格的寬度－用絕對像素值或文檔總寬度的百分比
<tr align=……> 設置表格格子的水平對齊（左中右）
<tr valign=……> 設置表格格子的垂直對齊（上中下）
<td colspan=value> 設置一個表格格子應跨占的列數（預設為1）
<td rowspan=value> 設置一個表格格子應跨占的行數（預設為1）
<td nowrap> 禁止表格格子內的內容自動斷行回卷
窗框　
<frameset>……</frameset> 放在一個窗框文檔的<body>標簽之前，也可以嵌在其他窗框文檔中
<frameset rows="value,value"> 定義一個窗框內的行數，可以使用絕對像素值或高度的百分比
<frameset cols="value,value"> 定義一個窗框內的列數，可以使用絕對像素值或寬度的百分比
<frame> 定義一個窗框內的單一窗或窗區域
<noframes>……</noframes> 定義在不支持窗框的瀏覽器中顯示什麼提示
窗框屬性　
<frame src="/URL"> 規定窗框內顯示什麼HTML文檔
<frame name="name"> 命名窗框或區域以便別的窗框可以指向它
<frame marginwidth=value> 定義窗框左右邊緣的空白大小，必須大於等於1
<frame marginheight=value> 定義窗框上下邊緣的空白大小，必須大於等於1
<frame scrolling=value> 設置窗框是否有滾動欄，其值可以是"yes","no","auto"，預設時一般為"auto"
<frame noresize> 禁止用戶調整一個窗框的大小
表單對於功能性的表單，一般需要運行一個CGI小程序，HTML僅僅是產生表單的表面樣子。
<form>……</form> 創建所有表單
<select multiple name="NAME" size=value>………</select> 創建一個滾動菜單，size設置在需要滾動前可以看到的表單項數目
<option> 設置每個表單項的內容
<select name="NAME">……</select> 創建一個下拉菜單
<textarea name="NAME" cols=value rows=value>……</textarea> 創建一個文本框區域，列的數目設置寬度，行的數目設置高度
<input type="checkbox" name="NAME"> 創建一個復選框，文字在標簽後面
<input type="radio" name="NAME" value="x"> 創建一個單選框，文字在標簽後面
<input type=text name="……" size=value> 創建一個單行文本輸入區域，size設置以字元計的寬度
<input type="submit" value="NAME"> 創建一個submit（提交）按鈕
<input type="image" border=0 name="NAME" src="/name.gif"> 創建一個使用圖象的submit（提交）按鈕
<input type="reset"> 創建一個reset（重置）按鈕
附加屬性　
<PRE>……</PRE> 預置格式風格標簽用來顯示字體寬度固定的文本塊，主要用來在表格格式中顯示文本
<TT>……</TT> 打字機風格用來顯示打字機字體寬度固定的文本
<SAMP>……</SAMP> 示例風格以單倍距顯示文本
<ADDRESS>……</ADDRESS> 地址風格一般用於文檔的開始或結尾處，並以斜體格式顯示文本。
<DL>……</DL> 定義列表風格用來顯示術語及其定義
　　
顏色
#=rrggbb 16 進制 RGB 數值，或者是下列預定義色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy, Gray,Lime,Yellow,white,Silver,Fuchsia,Purple,Green,Aqua[返回本頁首部]
META標簽
描述不包含在標准HTML里的文檔信息。
<META NAME="keywords" CONTENT="yourkeyword">
<META NAME="description" CONTENT="your homepage's description">
本頁的關鍵字和描述。在頁面里加上這些定義後，一些搜索引擎就能夠讓讀者根據這些關鍵字搜索到您的主頁，了解你的主頁內容。
<META HTTP-EQUIV="refresh" CONTENT="30, URL=new.htm">
瀏覽器將在30秒後，自動轉到new.htm。您可用它製作一個封面，在若干時間後，自動帶讀者來到您的目錄頁。如果URL項沒有，瀏覽器就是刷新本頁。這就是WWW聊天室定期刷新的實現原理。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
描述本頁使用的語言。瀏覽器根據此項，就可以選擇正確的語言編碼，而不需要讀者自己在瀏覽器里選擇。GB2312是指簡體中文，而台灣BIG5內碼的主頁則是用BIG5。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
強制性調用網上的最新版本。瀏覽器為節約時間，在本地硬碟上保存一個臨時文件。在重新調用時，便直接顯示那個臨時文件。如果您想讓讀者每次都看到最新的版本，可加上句。[返回本頁首部]
LINK
顯示本文檔和其他文檔之間的連接關系。一個最有用的應用就是外部層疊樣式表的定位。格式如下：
<LINK REL="stylesheet" href="/style.css">REL參數說明兩個文檔之間的關系，HREF說明目標文檔名。關於層疊樣式表，將在後面的課程中詳述。[返回本頁首部]
BASE
本文檔的原始地址。語法：<BASE HREF="原始地址">當讀者下載您的文檔後，由此可以知道是從哪裡下載的。[返回本頁首部]
BODY
BODY標記有一些屬性，用於定義頁面內的顯示效果。 ALINK、LINK、TEXT、VLINK—— 文字的顏色。
ALINK：當前激活的連接的文字顏色。
LINK：連接的文字顏色。
TEXT：文字的顏色。
VLINK：參觀過的文字顏色。
注意：文字的顏色要和背景色有明顯的差別，以便讀者瀏覽。
BACKGROUND、BGPROPERTIES、BGCOLOR——頁面的背景部分。
BACKGROUND：背景圖案，該圖案在頁面內平鋪。背景圖案應保持單一色調，以保證頁面文字易於閱讀。
BGPROPERTIES：設置成FIXED，則背景圖案不滾動。（只對INTERNET EXPLORER有效）
BGCOLOR：背景色。
注意：如果你的背景圖案是深色調，因之文字顏色為淡顏色，那麼由於瀏覽器調用頁面的順序是「背景色-文字-背景圖案」，那麼在背景圖案沒有顯示的情況下，你的文字在白顏色下很難閱讀，所以應該選用一個跟你的背景圖案顏色一致的背景色。
LEFTMARGIN、TOPMARGIN——頁邊空白。（只對INTERNET EXPLORER有效）
LEFTMARGIN：左邊頁邊空白。
TOPMARGIN：頂端頁邊空白。

3、網頁設計請問這個滾動圖片的代碼是什麼？

直接給你鏈接地址，你自己看
http://www.divcss5.com/css-texiao/texiao269.shtml

4、網頁設計圖片滾動代碼

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

打開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」網頁文件，最終效果如果所示：

5、網頁設計，橫幅怎麼加滾動的圖片

給你個例子，不明白的話直接問我就行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>符合w3c標準的向上不間斷滾動代碼</title>
<style type="text/css">

</style>

</head>
<body >

<div id="demo">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://www.baidu.com/img/logo.gif"; ></td>
<td><img src="http://www.baidu.com/img/logo.gif"; ></td>
<td><img src="http://www.baidu.com/img/logo.gif"; ></td>
<td><img src="http://www.baidu.com/img/logo.gif"; ></td>
<td><img src="http://www.baidu.com/img/logo.gif"; ></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
<script type="text/javascript">
var speed=40;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('demo1');
var FGDemo2=document.getElementById('demo2');
FGDemo2.innerHTML=FGDemo1.innerHTML
function Marquee1(){
if(FGDemo.scrollLeft<=0)
FGDemo.scrollLeft+=FGDemo2.offsetWidth
else{
FGDemo.scrollLeft--
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script> </div>
</body>
</html>

6、網頁設計中,如何插入垂直滾動字幕,請給出html代碼

<marquee direction="up" scrolldelay="100" scrollamount="1" onMouseOver="this.stop()" onMouseOut="this.start()" height="159 width=302">滾動的內容</marquee>

7、網頁設計中怎麼在頁面中設置一個滾動條

css屬性 overflow-y:auto; DIV裡面的內容超過DIV的高度，右邊就會自動出現滾動條

1、用一個div，定製成圖中的寬度和高度
2、然後再把div的樣式設成overflow-y:scroll，當div里的文字超出那個高度的時候，滾動條就出來了。
例如：<div style="width:100px; height:100px; overflow:auto; border:1px solid #000000;"><img src="" style="width:300px; height:300px;"></div>

導航:首頁 > 萬維百科 > 網頁設計圖文滾動html代碼

網頁設計圖文滾動html代碼

與網頁設計圖文滾動html代碼相關的知識