图片走马灯效果代码（html图片走马灯效果）[20240502更新]

今天给各位分享图片走马灯效果代码的知识，其中也会对html图片走马灯效果进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、网页添加图片上下走马灯效果！
• 2、几幅图片的走马灯效果怎么做？
• 3、dreamweaver网页制作中，怎样实现图片的走马灯效果
• 4、跑马灯似的图片滚动代码，如何做鼠标onmouse的悬停放大？代码怎么写？非要js或者css么？
• 5、求一段网页代码~图片跑马灯效果

网页添加图片上下走马灯效果！

其实代码是非常简单的：

marquee scrollamount="2" height="80" direction="up" onmouseover="this.stop();" onmouseout="this.start();" style="border:1px solid #CCCCCC;"你的内容/marquee

这个内容,可以是文字,也可以做成图片, UP是向上动.down就是向下.

这个是演示:

几幅图片的走马灯效果怎么做？

实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“marquee滚动的文字/marquee”语句，它的效果如下所示：

滚动的文字

适当的运用marquee标签的参数，可以表现出不同的效果，请看下面的几个例子：

1、左右弹来弹去的跑马灯

弹来弹去跑马灯!

实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。

源码粘贴框：

marquee width=400 behavior=alternate direction=left align=middle border=1弹来弹去跑马灯!/marquee

2、跑的很快的跑马灯

跑的很快跑马灯!

只要在marquee标签内加上“scrollamount=30”参数即可。

3、带有超级链接的跑马灯

带有超链接的跑马灯!点我试试？ 还有一条呢!点我试试？

其实实现的方法很简单，把整个marquee/marquee语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在marquee/marquee中的各条内容分别加上不同的链接，这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。

源码粘贴框：

marquee width=90%

a href="" target=_blank带有超链接的跑马灯!点我试试？/a

a href="" target=_blank还有一条呢!点我试试？/a

/marquee

以上几个例子都是marquee标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，marquee标签只被IE所支持，使用Netscape浏览器是看不到的噢。

参数 用法介绍

behavior=scroll, slide, alternate 跑马方式：循环绕行，只跑一次就停住，来回往复运动

direction=left,right 跑马方向：从左向右，从右向左

loop=100 跑马次数：循环100次，如不写默认为一直循环

width=100%,height=200 跑马范围：宽为100%，高为200像素

scrollamount=20 跑马速度：数越大越快

scrolldelay=500 跑马延时：毫秒数，利用它可实现跃进式滚动

hspace=20，vspace=20 跑马区域与其它区域间的空白大小

bgcolor=#00FFCC 跑马区域的背景颜色

这里向你介绍几个用JavaScript实现的较复杂的跑马灯，你只须把源码粘贴框中的代码按照说明复制的指定的位置就能看到跑马灯的效果。

1、状态栏中的跑马灯

在默认状态下浏览器的状态栏中显示的是链接指向信息，给人的感觉很单调。如果我们把问候语或是站点的介绍放在状态栏中滚动显示，一定能取得很好的效果。

源码粘贴框：

1、将以下代码放在head与/head之间：

script LANGUAGE="JavaScript"

!-- Begin

var Mes=new Array();

Mes[0]="洪恩在线欢迎你！ ";

Mes[1]="感谢你关注电脑交互教程 ";

Mes[2]="网页制作技巧 之 跑马灯大全 ";

var place=1;

var i=0;

function scroll()

{

window.status=Mes[i].substring(0, place);

if (place = Mes[i].length)

{

if(i2)

{

i++;

place=1;

window.setTimeout("scroll()",50);

}

else

{

i=0;

place=1;

window.setTimeout("scroll()",50);

}

}

else {

place++;

window.setTimeout("scroll()",50);

}

}

// End -－

/script

2、在body标签内加入onload 语句：

body onload="scroll();"

实现步骤:

(1)首先将JavaScript代码复制到head与/head之间，这段代码中包含了scroll()函数，它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容，你也可以显示更多条的信息，不过代码中i的值应等于信息的条数，也就是等于mes[]数组的维数；

(2)然后在body标签中加入onload()语句即可。

2、超链接的跑马灯式提示信息

把你的“老鼠”移到下面链接上试一试，有什么不同呢？原来弹出了一条跑马灯式的提示信息，这是怎么实现的呢，请接着看：

跑马灯大全(一) 电脑交互教程 网页制作技巧技巧

源码粘贴框：

1.将下面代码放在body标签下：

script

if (!document.layers!document.all)

event="test"

function showtip2(current,e,text){

if (document.alldocument.readyState=="complete"){

document.all.tooltip2.innerHTML='marquee style="border:1px solid black"'+text+'/marquee'

document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10

document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10

document.all.tooltip2.style.visibility="visible"

}

else if (document.layers){

document.tooltip2.document.nstip.document.write('b'+text+'/b')

document.tooltip2.document.nstip.document.close()

document.tooltip2.document.nstip.left=0

currentscroll=setInterval("scrolltip()",100)

document.tooltip2.left=e.pageX+10

document.tooltip2.top=e.pageY+10

document.tooltip2.visibility="show"

}

}

function hidetip2(){

if (document.all)

document.all.tooltip2.style.visibility="hidden"

else if (document.layers){

clearInterval(currentscroll)

document.tooltip2.visibility="hidden"

}

}

function scrolltip(){

if (document.tooltip2.document.nstip.left=-document.tooltip2.document.nstip.document.width)

document.tooltip2.document.nstip.left-=5

else

document.tooltip2.document.nstip.left=150

}

/script

2.然后在要出现提示信息的链接中，添加onMouseover语句：

a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee实现的各式跑马灯')" onMouseout="hidetip2()"跑马灯大全(一)/a

a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的电脑交互教程')" onMouseout="hidetip2()"电脑交互教程/a

a href="pmjq00.htm" onMouseover="showtip2(this,event,'点滴技巧装扮你的家')" onMouseout="hidetip2()"网页制作技巧技巧/a

实现步骤：

(1)先在body标签下面插入一段JavaScript代码；

(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。

还有一个参考下面的网址

dreamweaver网页制作中，怎样实现图片的走马灯效果

打开 Dreamweaver

新建 HTML 文档；

修改标题为"跑马灯"

保存为 index.html 文件。

首先，编写跑马灯部分的静态 HTML 代码，把图片排列起来

在 body 和 /body 标签中添加以下代码：

div

　ul

liimg src="img/1.jpg" //li

liimg src="img/2.jpg" //li

liimg src="img/3.jpg" //li

liimg src="img/4.jpg" //li

liimg src="img/5.jpg" //li

liimg src="img/6.jpg" //li

liimg src="img/7.jpg" //li

　/ul

/div

给上一步的 HTML 代码中的 div 标签增加 class 属性，如下：

　div class="con"

编写跑马灯部分的 CSS 样式代码，代码放在 head 和 /head 标签中，如下：

style type="text/css"

　ul{list-style:none; padding:0; margin:0;}

　.con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}

　.con ul li{ float:left; margin:0 5px 10px 0;}

　.con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}

/style

引入 JQuery 库

　script type="text/javascript" src="jquery-1.11.0.min.js"/script

引入 Marquee 插件

　script type="text/javascript" src="marquee2.js"/script

代码放在 /body 标签前，如图：

给 div 增加 marquee 类

　div class="con marquee"

保存文件，在浏览器中打开，就可以看到图片开始滚动了。

图片默认的滚动方向是“向上滚动”

如果要修改图片滚动的方向，可以给 div 指定 direction 属性，属性值可以取：

　up 上

　down 下

　left 左

　right 右

跑马灯似的图片滚动代码，如何做鼠标onmouse的悬停放大？代码怎么写？非要js或者css么？

首先是必须要有js跟CSS配合起来的，当然两者都不一定，例如js也可以实现动画效果，只是麻烦，要简单点直接用JQ里面的animate()方法配合css控制动画，又或者直接一点使用CSS3实现动画，注意是css3，但就你的代码写的是走马灯这种早就没人用的写法，目测你是个初学者，所以我的回答你并不会采纳，因为你看不懂，现在一般都用脚本写轮播图，没人用走马灯的了。

CSS3的悬停我可以写给你，JQ目测写出来对你也没多大用处,到时还得绑定什么的你一搞不出觉得我瞎说不采纳我那更悲剧

给img标签加上class或者给marquee加上class，否则怎么搞，我这里就以直接给img加上class="animate"写给你了

.animate:hover{-webkit-transform:scale(1.25,1.25);transform:scale(1.25,1.25);box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;-ms-transition:all .4s;transition:all .4s;}

里面的大小什么都是可以控制的，包括时间，这些就拜托您上W3C看看，我已经打了很多东西了，你要有良心就采纳，采纳后可以追问，否则别追问我问题了哈，我是web前端，语气有点叼，因为我被迫来问答里混，原谅我一个技术人员被叫来干这些鸟不拉屎的工作，所以带点脾气

求一段网页代码~图片跑马灯效果

使用两个jQuery插件可以满足你的要求。第一个，跑马灯插件jquery.liMarquee，第二个看图浮层的插件pirobox。

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" 

meta name="viewport" content="width=device-width, initial-scale=1.0"

titlejQuery跑马灯插件/title

link rel="stylesheet" type="text/css" href="css/default.css"

link rel="stylesheet" href="css/liMarquee.css"

style type="text/css"

.str_wrap{

padding-left: 3em;

padding-right: 3em;

background: #fefefe;

height: 10em;

line-height: 2em;

font-size: 1.2em;

}

.str4 .str_item {

font-size:0;

line-height:0

}

.str4 img { opacity:0.8;width:640px;height:450px;border:0;}

.str4 img:hover { opacity:1}

.str4.str_wrap.str_active {

background:#fff;

}

.str2 img { opacity:0.8;width:640px;height:450px;border:0;}

/style

script src="js/jquery1.8.3.min.js" type="text/javascript"/script

link href="css/style.css" class="piro_style" media="screen" title="white" rel="stylesheet" type="text/css" /

script type="text/javascript" src="js/pirobox.js"/script

script type="text/javascript"

$(document).ready(function() {

$().piroBox({

my_speed: 400, 

bg_alpha: 0.1, 

slideShow : true, 

slideSpeed : 4, 

close_all : '.piro_close,.piro_overlay'

});

});

/script

style type="text/css"

body{margin:0 0;}

div{float:left;}

#maindiv{width:1920px;height:1080px;background-color:#ccc;}

a{text-decoration:none;}

img{border:0;}

#zhudiv{width:1920px;height:900px;background-color:#002fa7;}

/style

/head

body

div id="maindiv"

div id="zhudiv"

div class="str4 str_wrap"

a class="pirobox_gall" href="img/1.jpg"img src="img/1.jpg"/a

a class="pirobox_gall" href="img/2.jpg"img src="img/2.jpg"/a

a class="pirobox_gall" href="img/3.jpg"img src="img/3.jpg"/a

a class="pirobox_gall" href="img/4.jpg"img src="img/4.jpg"/a

a class="pirobox_gall" href="img/5.jpg"img src="img/5.jpg"/a

a class="pirobox_gall" href="img/6.jpg"img src="img/6.jpg"/a

a class="pirobox_gall" href="img/7.jpg"img src="img/7.jpg"/a

/div

div class="str2 str_wrap"

a class="pirobox_gall" href="img/11.jpg"img src="img/11.jpg"/a

a class="pirobox_gall" href="img/22.jpg"img src="img/22.jpg"/a

a class="pirobox_gall" href="img/33.jpg"img src="img/33.jpg"/a

a class="pirobox_gall" href="img/44.jpg"img src="img/44.jpg"/a

a class="pirobox_gall" href="img/55.jpg"img src="img/55.jpg"/a

a class="pirobox_gall" href="img/66.jpg"img src="img/66.jpg"/a

a class="pirobox_gall" href="img/77.jpg"img src="img/77.jpg"/a

/div

/div

/div

script src="js/jquery.liMarquee.js"/script

script

$(window).load(function(){

var stringEl = $('.str4').liMarquee();

stringEl.trigger('mouseenter');

stringEl.data({scrollamount:150});

stringEl.trigger('mouseleave');

});

$('.str2').liMarquee({

direction: 'right'

});

/script

/body

/html

图片走马灯效果代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html图片走马灯效果、图片走马灯效果代码的信息别忘了在本站进行查找喔。