靜態網頁設計中圖片滾動

1、如何讓網頁中的圖片滾動起來

<div align='center' id='demo' style='overflow:hidden;height:130px;width:686px;'>
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td width="287" valign='top' id='demo1'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<TD class='MC_Pt_TD1'><IMG src='../img/1x1_pix.gif' width=3 height=1></TD>
<TD class='MC_Pt_TD2'><IMG src='../img/1x1_pix.gif' width=3 height=1></TD>
<TD class='MC_Pt_TD3'><SPAN class=Glow>產品展示 </SPAN></TD>
<TD class='HomeMC_Pt_TD5'><a href="Proct.asp" title="更多產品展示..."><IMG src='../img/1x1_pix.gif' width=52 height=23 border=0></a></TD> '此處圖片數量要比較多才能滾動
</tr>
</table>
</td>
<td width="12" valign=top id=demo2></td>
</tr>
</table>

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

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可能無法同時匹配2個相同的類/id名（你自己都說是復制下來的了）

4、靜態網頁里的圖片滾動代碼誰知道！！！

<table width="450" border="0" cellspacing="0" cellpadding="0" height="1"> <td valign="top" height="1"> <div id=demo style=overflow:hidden;height:150;width:720;> <div align="left"> <table cellpadding=0 cellspace=0 border=0 height="53" cellspacing="0"> <tr> <td id=demo1 valign=top height="51"> <!--裡面的圖片開始--> <table border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td>圖片</td><td>圖片</td> </tr> </table> <!--圖片結束--> </td> <td id=demo2 valign=top height="20"></td> <script> var speed=20 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> </table> </div> </div> </table>

5、如何在HTML中實現圖片的滾動效果

<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="第一張圖片地址" ><IMG src="第二張圖片地址"></MARQUEE>
注釋：
1) scrollAmount。它表示速度，值越大速度越快。
2) 加入onmouseover=stop() onmouseout=start()代碼，滑鼠指向循環文字圖片時他們會停止滾動，滑鼠離開時繼續滾動。
給滾動圖片加超鏈接
用<a href=>和</a>把<img>包圍，並且img必須設border=0，否則圖片會出現邊框。例子如下：
<MARQUEE scrollAmount=3 loop=infinite deplay="0"><a href="鏈接網址"><img src="圖片網址" border=0></a></MARQUEE>
圖片從右到左滾動
<MARQUEE width=寬 height=高 onmouseover=stop() onmouseout=start() scrollAmount=速度 loop=infinite deplay="0"><img src="圖片地址 "><img src="圖片地址 ">···</MARQUEE>
圖片從下到上滾動
<marquee behavior="scroll" direction=up width="寬" height="高" scrollamount="5" onmouseout="this.start()"><img src="圖片網址 "><img src="圖片網址 ">···</marquee>
帶有超鏈接的圖片實現滾動效果
<marquee behavior="scroll" direction=up width="120" height="60" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()"><a target="cont" href="連接地址"><img src="http://圖片地址" idth="88" height="33" border="0"></a><a target="cont" href="連接地址"><img src="圖片地址" width="88" height="33" border="0"></a></marquee>

6、html網頁中圖片橫向滾動

1、有截取滾動網頁的軟體，如FSCapture，就可以截取整個網頁。

2、 然後打開要截取的網頁，在FSCapture懸浮窗口上找到滾動截圖工具。

3、在默認情況下，是截整個界面，包括瀏覽器窗口，如果默認，下面有提示，點一下滑鼠左鍵即可。

4、 如果要自定義截圖窗口，按住Ctrl鍵，就會出現一個紅色十字架，用滑鼠拖動這個紅十字架，框住想要的窗口。然後拖動右側的滾動條到上端，或者點下端的滾動箭頭，就能截取整個網頁。

5、完成截圖後，會自動返回到FSCapture編輯窗口，這時只要保存即可。

6、 選擇一個保存文件夾，定義一個保存文件名，如滾動截圖，按保存。

7、再用普通的看圖軟體ACDSee打開，就能看到一個長長的網頁圖，看看長寬比930x1776。

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

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

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

8、網頁製作中如何製作滾動圖片

是通過jquery實現的，你找一個引用。然後在頁面添加如下JS代碼
//=======廣告輪播圖的實現=======
var _index=0;//初始化序列
var timePlay=null;
$("#Adv .ImgList").eq(0).show().siblings("div").hide();//最開始顯示第一張
//#Adv .ImgList換成你的ID或CLASS
$("ul.button li").hover(function(){/*滑鼠在上面*/
clearInterval(timePlay);//清處定時播放器
_index=$(this).index();//獲取當前li序列號
//alert(_index);//彈窗
$(this).addClass("hover").siblings().removeClass("hover");//顯示按扭
//fadeIn 淡入 fadeOut 淡出 你也可以選別的切換方式
$("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//顯示圖片
},function(){/*滑鼠移開*/
autoPlay();//啟用定時播放器
});

//自動輪播
//構建自動輪播的函數
function autoPlay(){
//alert("sss");
//設置定時器
timePlay=setInterval(function(){
_index++;
if(_index<4){
if(_index==3){_index=-1; }//變成-1
$("ul.button li").eq(_index).addClass("hover").siblings().removeClass("hover");//顯示按扭
$("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//顯示圖片

}else{_index=-1;/*設置序列號為-1,跳到播放第一張圖片*/}
},2000);
};
autoPlay();//調用和執行
//不知道你能否了解

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 速度：數越大越快

10、如何在網頁製作中設計一個滾動的圖片

搜索焦點圖，一大堆的資料。