图片循环滚动代码,图片连续滚动
求一ASP网页图片循环滚动代码?
div id="c_9"
marquee direction="left" TrueSpeed scrollamount="1" scrolldelay="30" onMouseOver="this.stop();" onMouseOut="this.start();"
img src="images/p_0/p_1.jpg" width="150" height="130" border="1" /
img src="images/p_0/p_2.jpg" width="150" height="130" border="1" /
img src="images/p_0/p_3.jpg" width="150" height="130" border="1" /
/marquee
/div
附:循环滚动基本语法
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
JavaScript代码实现图片循环滚动效果
1.概述
循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片。
2.技术要点
主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下:
setTimeout(function,milliseconds,[arguments])
参数说明:
a.
function:要调用的JavaScript自定义函数名称。
b.
Milliseconds:设置超时时间(以毫秒为单位)。
功能:经过超时时间后,调用函数。此值可以用clearTimeout()函数清除。
3.具体实现
(1)在页面的合适位置添加一个id属性为demo的div标记,并在该标记中添加表格及要要滚动显示的图片。关键代码如下:
div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;"
table
border="0"
cellspacing="0"
cellpadding="0"
tr
td
valign="top"
id="marquePic1"
!--
要循环滚动的图片
--
table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
tr
align="center"
%for(int
i=1;i8;i++){%
td
img
src="Images/%=i%.jpg"
width="118"
height="166"
border="1"
/td
%}%
/tr
/table
/td
td
id="marquePic2"
width="1"/td
/tr
/table
/div
(2)编写自定义的JavaScript函数move(),用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快,具体代码如下:
script
language="javascript"
var
speed=30
;
//设置间隔时间
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//获取demo对象
function
Marquee(n){
//实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滚动
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
/script
以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
图片不间断循环滚动代码(向左,向右,向上,向下)
//向左滚动script
var
speed=30
//滚动速度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//向右滚动,其实代码差不多,就一个地方不一样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
下面2个就是
上下的了script
var
speed=50
demo2.innerHTML=demo1.innerHTML
function
Marquee(){
if(demo2.offsetTop-demo.scrollTop=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var
MyMar=setInterval(Marquee,speed)
demo.onmouseover=function()
{clearInterval(MyMar)}
demo.onmouseout=function()
{MyMar=setInterval(Marquee,speed)}
/script
script
var
speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function
Marquee(){
if(demo1.offsetTop-demo.scrollTop=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var
MyMar=setInterval(Marquee,speed)
demo.onmouseover=function()
{clearInterval(MyMar)}
demo.onmouseout=function()
{MyMar=setInterval(Marquee,speed)}
/script
在图片上加连接
图片