1、網頁設計 請問這個滾動圖片的代碼是什麼?
直接給你鏈接地址,你自己看
http://www.divcss5.com/css-texiao/texiao269.shtml
2、網頁製作怎樣讓圖片滾動?
網頁圖片無縫滾動實現代碼:
<style type="text/css">
<!--
ul,li,div{margin:0; padding:0; font-size:12px;}
#demo {
width:678px; float:right; overflow:hidden;height:144px; border:none;
}
#indemo {
float: left;
width: 800%;
}
#demo1,#demo2{height:144px;float:left; display:inline-table;}
#demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }
#demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}
#demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</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>
<!--
var speed=20; //數字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script></td>
</tr>
</table>
3、網頁上怎麼製作滾動的圖片
網站循環滾動圖片需要js代碼製作
第一步,可以去相關的js特效網站下載一個你所需要的代碼
第二步,用DW修改路徑改為你自己網站的路徑
第三步,把你所做的圖片上傳到空間
第四步,添加代碼路徑及調用js文件網站保存
4、網頁製作中如何製作滾動圖片
是通過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();//調用和執行
//不知道你能否了解
5、求網頁設計中滾動圖片代碼
留郵箱,我明天上班發給你,我收集了很多js滾動焦點圖的代碼,還有其他的一些網頁效果,再給你推薦一個網站:站酷,這個網站做的很好看,裡面的素材也是相當的好,建議你去逛逛,裡面一定有你需要的東西!
6、網頁製作中的滾動圖片是如何做出來的
圖片滾動代碼 (從右向左滾動)
<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 速度:數越大越快
7、如何在網頁製作中將圖片設置為滾動
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」網頁文件即可。
8、網頁製作 圖片滾動
<marquee direction=up height=75 onMouseOut=this.start() onMouseOver=this.stop() scrollamount=1 scrolldelay=100 width="180" id=MARQUEE1>滾動內容</marquee>
Direction 參數可設置:up down left right (控制滾動方向)
Scrolldelay = 100 (100就是速度,值越大滾動越快……)
onMouseOut=this.start() ........滑鼠移出狀態滾動
onMouseOver=this.stop() .........滑鼠經過時停止滾動
基本語法
<marquee> ... </marquee>
移動屬性的設置 ,這種移動不僅僅局限於文字,也可以應用於圖片,表格等等
方向
<direction=#> #=left, right ,up ,down <marquee direction=left>從右向左移!</marquee>
方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈繞著走!</marquee>
<marquee behavior=slide>只走一次就歇了!</marquee>
<marquee behavior=alternate>來回走</marquee>
循環
<loop=#> #=次數;若未指定則循環不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>
速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快喲!</marquee>
延時
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>
外觀(Layout)設置
對齊方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦,我會移動耶!</marquee>
</font>
底色
<bgcolor=#> #=rrggbb 16 進制數碼,或者是下列預定義色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>顏色!</marquee>
面積
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面積!</marquee>
空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面積!</marquee>