Ⅰ 網頁製作怎麼實現圖片左右定時自動滾動,用JS jquery代碼怎麼實現
函數
描述
$(selector).hide()
隱藏被選元素
$(selector).show()
顯示被選元素
$(selector).toggle()
切換(在隱藏與顯示之間)被選元素
$(selector).slideDown()
向下滑動(顯示)被選元素
$(selector).slideUp()
向上滑動(隱藏)被選元素
$(selector).slideToggle()
對被選元素切換向上滑動和向下滑動
$(selector).fadeIn()
淡入被選元素
$(selector).fadeOut()
淡出被選元素
$(selector).fadeTo()
把被選元素淡出為給定的不透明度
$(selector).animate()
對被選元素執行自定義動畫
speed
參數規定顯示或隱藏的速度。可以設置這些值:"slow",
"fast",
"normal"
或毫秒。
callback
參數是在
hide
或
show
函數完成之後被執行的函數名稱
自己整理,絕非抄襲!
Ⅱ 網頁製作圖片滾動
<marqueedirection=upheight=75onMouseOut=this.start()onMouseOver=this.stop()scrollamount=1scrolldelay=100width="180"id=MARQUEE1>滾動內容</marquee>
Direction參數可設置:updownleftright(控制滾動方向)
Scrolldelay=100(100就是速度,值越大滾動越快……)
onMouseOut=this.start()........滑鼠移出狀態滾動
onMouseOver=this.stop().........滑鼠經過時停止滾動
基本語法
<marquee>...</marquee>
移動屬性的設置,這種移動不僅僅局限於文字,也可以應用於圖片,表格等等
方向
<direction=#>#=left,right,up,down<marqueedirection=left>從右向左移!</marquee>
方式
<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>一圈一圈繞著走!</marquee>
<marqueebehavior=slide>只走一次就歇了!</marquee>
<marqueebehavior=alternate>來回走</marquee>
循環
<loop=#>#=次數;若未指定則循環不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3趟</marquee><P>
<marqueeloop=3width=50%behavior=slide>只走3趟</marquee>
<marqueeloop=3width=50%behavior=alternate>只走3趟!</marquee>
速度
<scrollamount=#><marqueescrollamount=20>啦啦啦,我走得好快喲!</marquee>
延時
<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦,我走一步,停一停!</marquee>
外觀(Layout)設置
對齊方式(Align)
<align=#>#=top,middle,bottom<fontsize=6>
<marqueealign=#width=400>啦啦啦,我會移動耶!</marquee>
</font>
底色
<bgcolor=#>#=rrggbb16進制數碼,或者是下列預定義色彩:
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marqueebgcolor=aaaaee>顏色!</marquee>
面積
<height=#width=#><marqueeheight=40width=50%bgcolor=aaeeaa>面積!</marquee>
空白
(Margins)<hspace=#vspace=#>
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>面積!</marquee>
Ⅲ 網頁製作中的滾動圖片是如何做出來的
圖片滾動代碼 (從右向左滾動)
<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 速度:數越大越快
Ⅳ 如何在網頁製作中將圖片設置為滾動
1、素材的准備。為了更好的表現網站的風格和特色,具備一些更富表現力和吸引力的圖片是必不可少的;
Ⅳ 網頁上怎麼製作滾動的圖片
圖片跑馬燈效果如果使用<maquee>標簽就會出現圖片滾動時出現空白的地方,頁面會變的不怎麼順暢! 但是使用div層實現圖片跑馬燈效果就會使圖片銜接的很緊湊,頁面效果也會美觀點!如下例:(src填寫你的圖片路徑);這個就是在表格裡面添加的div標簽,在你想要添加的表格處加上和下面一樣的div層就可以了,javascript代碼放在最後(即</body>上面即可) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>圖片跑馬燈</title> </head> <body> <div style="overflow:hidden; width:350px" id='div'> <table width="308" border="1" align="center"> <tr> <td ><div id="div1" style=" display:inline"> <img src="跑馬燈/ad-01.jpg" width="214" height="203" style="display:inline"/><img src="跑馬燈/ad-02.jpg" width="214" height="203" style="display:inline"/><img src="跑馬燈/ad-03.jpg" width="214" height="203"style="display:inline" /> </div> </td> <td> <div id='div2' style=" display:inline"></div> </td> </tr> </table> </div> <script type="text/javascript"> document.getElementById('div2').innerHTML=document.getElementById('div1').innerHTML; function move(){ if(document.getElementById('div2').offsetWidth-document.getElementById('div').scrollLeft<=0){ document.getElementById('div').scrollLeft-=document.getElementById('div1').offsetWidth; } document.getElementById('div').scrollLeft++; } setInterval("move()",10) </script> </body> </html>
Ⅵ 如何製作滾動圖片
1、電腦打開美圖秀秀,然後點擊左上角的打開。
Ⅶ 網頁中的圖片滾動效果是怎麼實現的啊
設置層高,比如position:absoulute; z-index:999; top:100px; right:0px;
示例用法:
<html>
<head><title>123</title></head>
<body style="width:1024px; height:2000px;">
<p style="width:100px; height:100px; background-color:red;position:fixed; z-index:999; top:100px; right:0px;">
<img src="圖片地址" />
<p>
</body>
</html>
圖片中的P標簽里有圖片,我這里設置P區塊為寬高各100,用position:fixed定位,距離頂部100像素,右邊0像素漂浮著,z-index:999就是層高,可以理解為層高越高就可以漂浮在網頁上面。
效果如下:
不管如何滾動網頁滾動條 上下翻 左右翻都一直在屏幕距離頂部100像素,右邊0像素漂浮著。
Ⅷ 網頁製作中如何製作滾動圖片
是通過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();//調用和執行
//不知道你能否了解