圖片滾動樣式網頁設計代碼_網頁設計圖片滾動代碼

1、網頁製作代碼問題！像flash一樣的圖片滾動怎麼做？

呵呵，那個是js特效哦，你去懶人圖庫找找，jquery特效中的，幻燈效果，或者是圖片滾動效果，下載下來，按照自己的需求改一下即可！！！

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

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」網頁文件即可。

3、網頁製作：誰給我發個js實現圖片橫向滾動的源代碼？

<div id=demo style="width:800px; overflow:hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id=demo1>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
</tr>
</table>
</td>
<td id=demo2></td>
</tr>
</table>
</div>
<script>
var speed=20;
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

id為demo的div 寬度是在版面上要顯示出的寬度，這個是必須定義的，還有overflow:hidden這個也是必須的
內容放在demo1的td裡面

你放進去滾動的內容寬度必須大於demo的寬度才能滾動，當然這個寬度隨你自己定
理論上是可以放無限寬的數據
滑鼠懸停就停止滾動，離開繼續滾動

4、急求，在網頁設計里，把一串圖片滾動從左到右播放的代碼，謝謝！注，是就像布條一樣一張張流動的

<DIV style="WIDTH: 604px; HEIGHT: 120px; OVERFLOW: hidden" id=demo>
<TABLE border=0 cellPadding=0 align=left cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="25%"
align=left><TBODY>
<TR>
<TD align=middle>
<TABLE class=huikuang border=0 cellSpacing=5 cellPadding=0
width="7%" bgColor=#f5f5f5 align=center>
<TBODY>
<TR>
<TD vAlign=center align=middle><A
href="http://www.chinahaihua.com/procts_show.asp?id=118"><IMG
border=0 src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
width=122 height=70></A></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=25 align=middle><A class=a
href="http://www.chinahaihua.com/procts_show.asp">1111
</A></TD></TR></TBODY></TABLE>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="25%"
align=left><TBODY>
<TR>
<TD align=middle>
<TABLE class=huikuang border=0 cellSpacing=5 cellPadding=0
width="7%" bgColor=#f5f5f5 align=center>
<TBODY>
<TR>
<TD vAlign=center align=middle><A
href="http://www.chinahaihua.com/procts_show.asp?id=116"><IMG
border=0 src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
width=122 height=70></A></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=25 align=middle><A class=a
href="http://www.chinahaihua.com/procts_show.asp">2222
</A></TD></TR></TBODY></TABLE>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="25%"
align=left><TBODY>
<TR>
<TD align=middle>
<TABLE class=huikuang border=0 cellSpacing=5 cellPadding=0
width="7%" bgColor=#f5f5f5 align=center>
<TBODY>
<TR>
<TD vAlign=center align=middle><A
href="http://www.chinahaihua.com/procts_show.asp?id=115"><IMG
border=0 src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
width=122 height=70></A></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=25 align=middle><A class=a
href="http://www.chinahaihua.com/procts_show.asp">3333
</A></TD></TR></TBODY></TABLE>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="25%"
align=left><TBODY>
<TR>
<TD align=middle>
<TABLE class=huikuang border=0 cellSpacing=5 cellPadding=0
width="7%" bgColor=#f5f5f5 align=center>
<TBODY>
<TR>
<TD vAlign=center align=middle><A
href="http://www.chinahaihua.com/procts_show.asp?id=114"><IMG
border=0 src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
width=122 height=70></A></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=25 align=middle><A class=a
href="http://www.chinahaihua.com/procts_show.asp">4444
</A></TD></TR></TBODY></TABLE></TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=15
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee, speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee, speed)}
</SCRIPT>

5、Dreamweaver製作網頁時的圖片字體滾動效果怎麼編寫代碼?

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 寬高可以換

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

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

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

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

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

8、求網頁設計中滾動圖片代碼

留郵箱，我明天上班發給你，我收集了很多js滾動焦點圖的代碼，還有其他的一些網頁效果，再給你推薦一個網站：站酷，這個網站做的很好看，裡面的素材也是相當的好，建議你去逛逛，裡面一定有你需要的東西！

9、Dreamweaver製作圖片左右滾動的完整代碼怎麼編寫?

使用這個代碼就可以了，而且可以稍微修改下的。

<marquee>標簽是滾動字幕標簽，裡面可以嵌套很多標簽，比如<p>標簽、<a>標簽、<img>標簽，我給你的這個代碼就是嵌套<img>標簽的應用左右滾動可以

以下是這個標簽的參數：

(1)scrollAmount：它表示速度，值越大速度越快。如果沒有它，默認為6，建議設為1～3比較好。

(2)width和height：表示滾動區域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設height的值。

(3)direction：表示滾動的方向，默認為從右向左(left)：可選的值有right、down、up。

10、網頁製作中無限循環滾動的圖片代碼

我自己用jquery寫的縱向的，想要橫向的我可以幫你改改。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />
<title>無標題文檔</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
var height = $("ul li").height();
var ul = $("ul");
var picTimer;
var btn = "<div class='scroll_btn pre'></div><div

class='scroll_btn next'></div>";
//$("ul").append(btn);
$("ul").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(
function() {
var field = $("ul

li:first");
field.animate

({marginTop:-height+'px'},600,function(){
field.appendTo

(ul).css('marginTop',0);
})
},3000
);
}).trigger("mouseleave");
//下一個需要研究
$(".pre").click(function() {
var field = $("ul li:first");
var lastField = $("ul li:last");
field.animate({marginTop:height

+'px'},600,function(){
lastField.insertBefore(field);
});
});

$(".next").click(function() {
var field = $("ul li:first");
field.animate

({marginTop:-height+'px'},600,function(){
field.appendTo

(ul).css('marginTop',0);
}) ;
});
});
</script>
<style type="text/css">
* { margin:0px; padding:0px;}
ul { width:200px; height:200px; border:1px solid #030;

position:relative; overflow:hidden;}
li { list-style:none; width:200px; height:200px; display:block;}
.scroll_btn { width:100px; height:20px; position:absolute;

background:#000; z-index:100}
.pre { left:10px; top:10px;}
.next { left:10px; bottom:10px;}
</style>
</head>

<body>
<ul>
<li style="background:red"></li>
<li style="background:green"></li>
<li style="background:blue"></li>
<li style="background:yellow"></li>
</ul>
</body>
</html>
記得：<script language="javascript" src="jquery.js"></script>
載入jquery工程才能看效果

導航:首頁 > 萬維百科 > 圖片滾動樣式網頁設計代碼

圖片滾動樣式網頁設計代碼

與圖片滾動樣式網頁設計代碼相關的知識