简单的图片滚动代码_图片上加滚动文字代码

‘壹’ 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;i<8;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代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

‘贰’ 图片上下滚动代码

简单的话MARQUEE就可以了，如要别效果，用JS写一个，网上现成的也很多
如：
<marquee
loop="10"
direction="down"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
>
<img
src="01.jpg">
<img
src="02.jpg">
</marquee>

‘叁’ 网页制作-图片从左向右滚动代码

非常简单!!
<MARQUEE
direction=right
>
<IMG
src="http://图片地址">
</MARQUEE>
如果你想多放几张图片，可以在<MARQUEE></MARQUEE>之间插入<IMG
src="http://图片地址">
图片滚动效果是非常简单的~~还可以在这段代码里丰富你的指定

‘肆’ 高分急求图片滚动代码

图片滚动代码如下:
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.jpg"></td><td id=demo2 valign=top></td></tr></table></div>
<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>

把src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg"><img 这里路径改成你自已图像存放的路径就可以了.

若想加个超链接的话,只要加个代码就可以了.
我举个例子,<a href="超链接路径"><img src="图像路径"></a>

‘伍’ 图片上加滚动文字代码

在图片上添加上下滚动文字的源代码：
<DIV><TABLE
style="WIDTH:
500px;
HEIGHT:
375px"
width=500
border=0><TBODY><TR><TD
background=图片地址
height=375><P><MARQUEE
style="WIDTH:
500px;
HEIGHT:
375px"
scrollAmount=1
scrollDelay=50
direction=up
width=500
height=375>图片上的文字</MARQUEE></P></TD></TR></TBODY>
代码说明：
1，width=宽度
height=高度
的数值为图片显示的大小比例，必须根据图片实际大小调整；如图片尺寸为1024：768的，其代码中的宽度和高度，也必须变更为1024：768；图片尺寸为500：375的，其代码中的宽度和高度，就必须变更为500：375，否则显示出来的画面不完整；而且代码里四组宽，高数值变更要统一；
2，scrollAmount=1
为字速，数值越大字的运行速度越快；
3，border=0>
为边框数值，0为无边框；填上数字就变为有边框，而且数字的大小，就是边框的宽窄度；
4，direction=up
为字的行走方向
up=上
down=下
；
如要调整为左右方向的话
left=左
right=右
那字体就会从图片顶端成单行通过；
5，滚动文字行与行之间不要有空行；
具体操作方法如下：
第一步：先要找到做文章背景图片的图片网络地址，否则文章做了一半才去找图片地址就麻烦了；
第二步：进入发表文章窗口；
第三步：勾选“显示源代码”（至关重要!）；
第四步：在编辑栏内原有代码后面添加上列代码（代码里应先加好图片地址和你需要加入的文字）；
第五步：取消“显示源代码”的选择，你就会在编辑栏里看到图片和文字效果了；
第六步：最后，点击发表文章就OK了；
最后还有一条，如果你不想让文字滚动的话，那就只须按以上方法操作到第四步时，把你准备好的文章（包括已处理好字的大小，字体，颜色），直接复制到图片上，点击发表文章即可；当然，代码里“图片上的文字”这几个字应预先去掉；
欢迎光临我的博客：http://blog.sina.com.cn/m/azeng

‘陆’ 让图片从右到左滚动的网页代码是怎么样的

往左是：
<marquee><img
src="你的图片地址"></marquee>
往右是：
<marquee
direction=right><img
src="你的图片地址"></marquee>
往上是：
<marquee
direction=up><img
src="你的图片地址"></marquee>
往下是：
<marquee
direction=down><img
src="你的图片地址"></marquee>
如果需要在当鼠标移动到图片上时停止滚动，就在<marquee>里加onmouseover=stop()
onmouseout=start()，
例如<marquee
direction=down
onmouseover=stop()
onmouseout=start()><img
src="你的图片地址"></marquee>

‘柒’ html图片滚动代码

<div id=butong_net_top
style=overflow:hidden;height:100;width:90;>
<div id=butong_net_top1>
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
</div>
<div
id=butong_net_top2></div>
</div>
<script>
var speed=30
butong_net_top2.innerHTML=butong_net_top1.innerHTML
//克隆butong_net_top1为butong_net_top2
function Marquee1(){
//当滚动至butong_net_top1与butong_net_top2交界时
if(butong_net_top2.offsetTop-butong_net_top.scrollTop<=0)&<60;&<60;
butong_net_top.scrollTop-=butong_net_top1.offsetHeight
//butong_net_top跳到最顶端
else{
butong_net_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
butong_net_top.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
butong_net_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>



<br>



<div id=butong_net_bottom
style=overflow:hidden;height:100;width:90;>
<div id=butong_net_bottom1>
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
</div>
<div
id=butong_net_bottom2></div>
</div>
<script>
var speed=30
butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML
butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight
function Marquee2(){
if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=0)
butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight
else{
butong_net_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
butong_net_bottom.onmouseover=function()
{clearInterval(MyMar2)}
butong_net_bottom.onmouseout=function()
{MyMar2=setInterval(Marquee2,speed)}
</script>



<br>



<div id="butong_net_left"
style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0"
border="0">
<tr><td
id="butong_net_left1" valign="top"
align="center">
<table cellpadding="2" cellspacing="0"
border="0">
<tr align="center">
<td><img
src="<img
src="插入需要滚动的图片"></td>
<td><img
src="插入需要滚动的图片"></td>
<td><img
src="插入需要滚动的图片"></td>
<td><img
src="插入需要滚动的图片"></td>
<td><img
src="插入需要滚动的图片"></td>
</tr>
</table>
</td>
<td id="butong_net_left2"
valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.onmouseover=function()
{clearInterval(MyMar3)}
butong_net_left.onmouseout=function()
{MyMar3=setInterval(Marquee3,speed)}
</script>



<br>



<div id="butong_net_right"
style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0"
border="0">
<tr><td
id="butong_net_right1" valign="top"
align="center">
<table cellpadding="2" cellspacing="0"
border="0">
<tr align="center">
<td><img
src="插入需要滚动的图片"></td>
<td><img
src="插入需要滚动的图片"></td>
<td><img
src="插入需要滚动的图片"></td>
<td><img
src="插入需要滚动的图片"></td>
<td><img
src="插入需要滚动的图片"></td>
</tr>
</table>
</td>
<td id="butong_net_right2"
valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function()
{clearInterval(MyMar4)}
butong_net_right.onmouseout=function()
{MyMar4=setInterval(Marquee4,speed)}
</script>

‘捌’ 图片滚动代码

图片滚动代码

<MARQUEE width=500 height=95 onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="pic/logo.gif"><IMG src="images/aiving.gif"></MARQUEE>

1.图片尺寸为原始大小
2. scrollAmount 它表示速度，值越大速度越快。
3. width 是滚动区域的宽度，height 滚动区域的高度。
4. 加入onmouseover=stop() onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。
5.用<a href=>和</a>把<img>包围可以给滚动图片加上超级链接，并且img必须设border=0，否则图片会出现边框。
6.滚动方向可参见本专题“文字滚动代码”。

--------
请求加分给我

‘玖’ 图片滚动效果代码

<div id="Demo_t0" style="overflow:hidden;width:930;height:160;">
<table width=" 0" height="136" border=0 align=center cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td align="center" valign=top id=Demo_t1><table width=" 0" height="136" border=0 align=left cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td width=" 0" align="center" valign="middle">滚动内容</td>
</tr>
</table></td>
<td width="1" valign=top id=Demo_t2></td>
</tr>
</table>
</div>
<script language="javascript">
var Demo_speed=30
Demo_t2.innerHTML=Demo_t1.innerHTML
function Demo_Marquee(){
if(Demo_t2.offsetWidth-Demo_t0.scrollLeft<=0)
Demo_t0.scrollLeft-=Demo_t1.offsetWidth
else{
Demo_t0.scrollLeft++
}
}
var Demo_MyMar=setInterval(Demo_Marquee,Demo_speed)
Demo_t0.onmouseover=function() {clearInterval(Demo_MyMar)}
Demo_t0.onmouseout=function() {Demo_MyMar=setInterval(Demo_Marquee,Demo_speed)}
</script>

肯定能有我做网站时就是用的这个代码

width:930;height:160 两个数值是滚动范围的宽和长

然后可以将图片的路径代码直接替换上面代码中“滚动内容”就可以了

‘拾’ 谁有简单的图片滚动无缝代码越简单越好，而且要有简要说明的！

<Marquee behavior="alternate" height="50" direction="left" scrollamount="3" scrolldelay="30" width="100%">
<img src="1.jpg"><img src="2.jpg">
</Marquee>

BEHAVIOR：可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是SLIDE，那么文本就移动到文档上，并停留在页边距上。如果设定为AlterNATE，则文本从一边移动到另一边。如果设定为SCROLL，文本将在页面上反复滚动。本属性不是必须使用的

direction:方向

scrollamount:速度

scrolldelay:廷时

导航:首页 > 好看图片 > 简单的图片滚动代码

简单的图片滚动代码

与简单的图片滚动代码相关的资料