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

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

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

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

以下是這個標簽的參數：

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

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

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

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、網頁製作中無限循環滾動的圖片代碼

我自己用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工程才能看效果

4、網頁製作-圖片從左向右滾動代碼

非常簡單!!
<MARQUEE
direction=right
>
<IMG
src="http://圖片地址">
</MARQUEE>
如果你想多放幾張圖片，可以在<MARQUEE></MARQUEE>之間插入<IMG
src="http://圖片地址">
圖片滾內動效果是非常簡單的~~容還可以在這段代碼里豐富你的指定

5、網頁上怎麼製作滾動的圖片

網站循環滾動圖片需要js代碼製作
第一步，可以去相關的js特效網站下載一個你所需要的代碼
第二步，用DW修改路徑改為你自己網站的路徑
第三步，把你所做的圖片上傳到空間
第四步，添加代碼路徑及調用js文件網站保存

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

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

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、網頁設計請問這個滾動圖片的代碼是什麼？

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

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

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

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

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

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

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

網頁設計滾動圖片代碼

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