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

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

是通過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();//調用和執行
//不知道你能否了解

2、網頁設計-圖片滾動問題

你的代碼本身就有錯誤！

一、向左滾動

1、調用「圖片」欄目圖片的向左滾動代碼

以下是首頁模板最新圖片部分代碼：

-----------------------------------
〈tr〉
〈td class=main_title_575〉〈B〉最新圖片〈/B〉〈/td〉
〈/tr〉
〈tr〉
〈td class=main_tdbg_575 vAlign=center align=middle height=131〉
〈!--{$GetPicPhoto(3,0,True,0,4,False,False,0,1,1,130,90,20,0,True,4)}--〉〈/td〉
〈/tr〉
------------------------------------
用以下是滾動代碼代替上面紅色的標簽部分，注意紅色部分的變化。
------------------------------------
〈!--滾動代碼開始--〉
〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉
〈table cellPadding=0 align=left border=0 cellspace="0"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉
〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/table〉
〈/div〉
〈SCRIPT〉
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft〈=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
〈/SCRIPT〉
〈!--滾動代碼結束--〉
-----------------------------------
2、文章頻道圖片向左滾動代碼（效果演示）
以下是文章頻道模板最新圖片部分代碼
-----------------------------------
〈tr〉
〈td Class="main_title_575"〉〈b〉最新圖片{$ChannelShortName}〈/b〉〈/td〉
〈/tr〉
〈tr〉
〈td Class="main_tdbg_575"〉 {$GetPicArticle(ChannelID,0,True,0,4,false,false,0,3,2,130,90,20,0,True,4)} 〈/td〉
〈/tr〉
〈tr〉
〈td Class="main_shadow"〉〈/td〉
〈/tr〉
------------------------------------
用以下是滾動代碼代替上面紅色的標簽，注意紅色部分的變化。紅色數字代表了滾動圖片的總數（這里為8張）。
----------------------------------
〈!--滾動代碼開始--〉
〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉
〈table cellPadding=0 align=left border=0 cellspace="0"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicArticle(ChannelID,0,True,0,8,false,false,0,3,2,130,90,20,0,True,8)}--〉〈/td〉
〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/table〉
〈/div〉
〈SCRIPT〉
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft〈=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
〈/SCRIPT〉
〈!--滾動代碼結束--〉
-----------------------------------
3、下載頻道圖片向左滾動代碼（效果演示）
以下是下載頻道模板推薦下載圖片部分代碼
-----------------------------------
〈tr〉
〈td Class="main_title_575"〉〈table width="100%" border="0" cellspacing="0" cellpadding="0"〉
〈tr〉
〈td〉〈b〉〈a class=』Class』 href="{$InstallDir}{$ChannelDir}/ShowElite.asp"〉推薦下載(圖)〈/a〉〈/b〉〈/td〉
〈td align="right"〉{$RssElite}〈/td〉
〈/tr〉
〈/table〉〈/td〉
〈/tr〉
〈tr〉
〈td align="center" Class="main_tdbg_575"〉 {$GetPicSoft(ChannelID,0,True,0,4,false,True,0,3,2,130,90,20,0,True,4)} 〈/td〉
〈/tr〉
------------------------------------
用以下是滾動代碼代替上面紅色的標簽，注意紅色部分的變化。紅色數字代表了滾動圖片的總數（這里為12張）。
------------------------------------
〈!--滾動代碼開始--〉
〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉
〈table cellPadding=0 align=left border=0 cellspace="0"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicSoft(ChannelID,0,True,0,12,false,True,0,3,2,130,90,20,0,True,12)}--〉〈/td〉
〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/table〉
〈/div〉
〈SCRIPT〉
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft〈=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
〈/SCRIPT〉
〈!--滾動代碼結束--〉
------------------------------
從以上可以看出，滾動圖片代碼基本上是相同的，不同的是調用圖片的標簽變了。
------------------------------
二、向上滾動
向上滾動代碼使用方法同上左滾動代碼，這里只給出代碼，不再說明。
以下是文章頻道圖片調用的滾動代碼。
-----------------------------------------------------------
〈!--向上滾動代碼開始--〉
〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 160px; HEIGHT: 360px"〉
〈DIV id=rolllink1〉
〈TABLE cellSpacing=5 width="100%"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicArticle(0,0,True,0,6,false,false,0,3,2,160,100,20,0,True,1)}--〉〈/td〉
〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/TABLE〉
〈/DIV〉
〈DIV id=rolllink2〉〈/DIV〉
〈/DIV〉
〈SCRIPT〉
var rollspeed=40
rolllink2.innerHTML=rolllink1.innerHTML
function Marquee(){
if(rolllink2.offsetTop-rolllink.scrollTop〈=0)
rolllink.scrollTop-=rolllink1.offsetHeight
else{
rolllink.scrollTop++
}
}
var MyMar=setInterval(Marquee,rollspeed)
rolllink.onmouseover=function() {clearInterval(MyMar)}
rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}
〈/SCRIPT〉
〈!--向上滾動代碼結束--〉
-----------------------------------------------------------
以下是圖片頻道的3行4列向上滾動代碼摘錄：（效果演示）
………………………
〈tr〉
〈td colspan="3" Class="main_title_575"〉〈a class="Class" href="{$InstallDir}{$ChannelDir}/ShowNew.asp"〉〈b〉最新{$ChannelShortName}〈/b〉〈/a〉〈/td〉
〈/tr〉
〈tr valign="top"〉
〈td colspan="3"〉〈table width="100%" border="0" cellspacing="0" cellpadding="0" Class="main_tdbg_575"〉
〈tr〉
〈td height="200" valign="top"〉
〈!--向上滾動代碼開始--〉
〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 575px; HEIGHT: 365px"〉
〈DIV id=rolllink1〉
〈TABLE cellSpacing=5 width="100%"〉
〈tr〉
〈td id=demo11 vAlign=top〉
〈!--{$GetPicPhoto(ChannelID,0,True,0,24,False,False,0,1,1,130,90,20,0,True, 4)}--〉〈/td〉
〈td id=demo12 vAlign=top〉〈/td〉
〈/tr〉
〈/TABLE〉
〈/DIV〉
〈DIV id=rolllink2〉〈/DIV〉
〈/DIV〉
〈SCRIPT〉
var rollspeed=40
rolllink2.innerHTML=rolllink1.innerHTML
function Marquee(){
if(rolllink2.offsetTop-rolllink.scrollTop〈=0)
rolllink.scrollTop-=rolllink1.offsetHeight
else{
rolllink.scrollTop++
}
}
var MyMar=setInterval(Marquee,rollspeed)
rolllink.onmouseover=function() {clearInterval(MyMar)}
rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}
〈/SCRIPT〉
〈!--向上滾動代碼結束--〉
〈/td〉
〈/tr〉
〈/table〉
〈/td〉
〈/tr〉
〈tr〉
〈td colspan="3" Class="main_shadow"〉〈/td〉
〈/tr〉
…………………………
三、向右滾動
--------------------------------------
〈!--向右滾動代碼開始--〉
〈div id=demo style=overflow:hidden;height:120;width:560;〉
〈table align=left cellpadding=0 cellspace=0 border=0〉
〈tr〉
〈td id=demo1 valign=top〉〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉
〈td id=demo2 valign=top〉〈/td〉
〈/tr〉
〈/table〉
〈/div〉
〈script〉
var speed=30
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〉
〈!--向右滾動代碼結束--〉

注意滾動圖片數不要太大，這會影響頁面下載速度。

你可以參照！
http://99mp3.go2.icpcn.com/網站的！
http://99mp3.go2.icpcn.com/tu/a.htm

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

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

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

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

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

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

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編號的降序和順序。

6、有關網頁設計中圖片滾動的問題

你是問上部的那個焦點圖輪播還是下面高清圖片的多張圖左右控制更新啊？

這些代碼都能找得到的，我經常是去懶人圖庫里，有個JS版塊，裡面有很多選擇。

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

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

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

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

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

9、網頁製作怎樣讓圖片滾動？

網頁圖片無縫滾動實現代碼：
<style type="text/css">

</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><a href="#"><img src="http://boaer.comimg/temp01.gif" width="123" height="110" /></a><span><a href="#">產品名稱</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp02.gif" width="123" height="110" /></a><span><a href="#">產品名稱</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp03.gif" height="110" /></a><span><a href="#">產品名稱</a></span></li>
</ul></div><div id="圖片展示代碼例子"></div></div></div><script>

</script></td>
</tr>
</table>

導航:首頁 > 萬維百科 > 網頁設計中圖片滾動

網頁設計中圖片滾動

與網頁設計中圖片滾動相關的知識