图片滚动样式网页设计代码_网页设计图片滚动代码

1、网页制作代码问题！像flash一样的图片滚动怎么做？

呵呵，那个是js特效哦，你去懒人图库找找，jquery特效中的，幻灯效果，或者是图片滚动效果，下载下来，按照自己的需求改一下即可！！！

2、如何在网页制作中将图片设置为滚动

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”网页文件即可。

3、网页制作：谁给我发个js实现图片横向滚动的源代码？

<div id=demo style="width:800px; overflow:hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id=demo1>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
</tr>
</table>
</td>
<td id=demo2></td>
</tr>
</table>
</div>
<script>
var speed=20;
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

id为demo的div 宽度是在版面上要显示出的宽度，这个是必须定义的，还有overflow:hidden这个也是必须的
内容放在demo1的td里面

你放进去滚动的内容宽度必须大于demo的宽度才能滚动，当然这个宽度随你自己定
理论上是可以放无限宽的数据
鼠标悬停就停止滚动，离开继续滚动

4、急求，在网页设计里，把一串图片滚动从左到右播放的代码，谢谢！注，是就像布条一样一张张流动的

<DIV style="WIDTH: 604px; HEIGHT: 120px; OVERFLOW: hidden" id=demo>
<TABLE border=0 cellPadding=0 align=left cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="25%"
align=left><TBODY>
<TR>
<TD align=middle>
<TABLE class=huikuang border=0 cellSpacing=5 cellPadding=0
width="7%" bgColor=#f5f5f5 align=center>
<TBODY>
<TR>
<TD vAlign=center align=middle><A
href="http://www.chinahaihua.com/procts_show.asp?id=118"><IMG
border=0 src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
width=122 height=70></A></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=25 align=middle><A class=a
href="http://www.chinahaihua.com/procts_show.asp">1111
</A></TD></TR></TBODY></TABLE>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="25%"
align=left><TBODY>
<TR>
<TD align=middle>
<TABLE class=huikuang border=0 cellSpacing=5 cellPadding=0
width="7%" bgColor=#f5f5f5 align=center>
<TBODY>
<TR>
<TD vAlign=center align=middle><A
href="http://www.chinahaihua.com/procts_show.asp?id=116"><IMG
border=0 src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
width=122 height=70></A></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=25 align=middle><A class=a
href="http://www.chinahaihua.com/procts_show.asp">2222
</A></TD></TR></TBODY></TABLE>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="25%"
align=left><TBODY>
<TR>
<TD align=middle>
<TABLE class=huikuang border=0 cellSpacing=5 cellPadding=0
width="7%" bgColor=#f5f5f5 align=center>
<TBODY>
<TR>
<TD vAlign=center align=middle><A
href="http://www.chinahaihua.com/procts_show.asp?id=115"><IMG
border=0 src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
width=122 height=70></A></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=25 align=middle><A class=a
href="http://www.chinahaihua.com/procts_show.asp">3333
</A></TD></TR></TBODY></TABLE>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="25%"
align=left><TBODY>
<TR>
<TD align=middle>
<TABLE class=huikuang border=0 cellSpacing=5 cellPadding=0
width="7%" bgColor=#f5f5f5 align=center>
<TBODY>
<TR>
<TD vAlign=center align=middle><A
href="http://www.chinahaihua.com/procts_show.asp?id=114"><IMG
border=0 src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
width=122 height=70></A></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=25 align=middle><A class=a
href="http://www.chinahaihua.com/procts_show.asp">4444
</A></TD></TR></TBODY></TABLE></TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=15
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>

5、Dreamweaver制作网页时的图片字体滚动效果怎么编写代码?

1.<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount="2" direction="up" behavior="scroll">把你的内容放这里</marquee>这个代码是比较简单的示例，会有空白，如果不想有空白的话还是需要JS的。

2.<MARQUEE scrollAmount=1 scrollDelay=1 direction=right width=180 height=250><IMG src="图片网址" width=180 border=0> <IMG src="图片网址" width=180 border=0> <IMG src="图片网址" width=180 border=0> <IMG src="图片网址" width=180 border=0> <IMG src="图片网址" width=180 border=0> <IMG src="图片网址" width=180 border=0>
<DIV></DIV></MARQUEE></CENTER>

数值可以变换，数值的变换可以影响图片速度的滚动！图片滚动方向也可以换！都是简单的英语单词，大家在变换的时候应该没有问题

上下滚动图片代码:

代码：<CENTER>
<MARQUEE scrollAmount=1 scrollDelay=1 direction=up width=170 height=250>
<DIV align=center><IMG src="图片网址" width=300 border=0></DIV>
<DIV align=center><IMG src="图片网址" width=300 border=0></DIV>
<DIV align=center><IMG src="图片网址" width=300 border=0></DIV>
<DIV align=center><IMG src="图片网址" width=300 border=0></DIV>
<DIV align=center><IMG src="图片网址" width=300 border=0></DIV>
<DIV align=center><IMG src="图片网址" width=300 border=0></DIV></MARQUEE></CENTER>

注：direction方向可UP可DOWN 宽高可以换

6、网页设计图片滚动代码

素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。

打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。

切换至代码编辑界面，输入如下代码：

对应效果如图所示：

新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。

在新建的样式表文件"MyStyle.css”文件中输入如下代码：
* { padding:0; margin:0;} /*设置所有对像的内边距为0*/
body { text-align:center;} /*设置页面居中对齐*/
#photo-list {
/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）
计算：6*(100+2*2+1*2+9) - 9
之所以减去9是第6张图片的右边留白 */
width:681px;

/* 图片的宽度（包含高度、padding、border）
计算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份将被隐藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

对应文件内容如图所示：

在网页文件"index.html"中添加对该样式表的引用：

此时网页效果如图所示：

新建一个JS文件，并将该文件另存为“MoveEffect.js"。

在”MoveEffect.js“文件中输入如下所示代码：
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //获得每个img容器的宽度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //数值越大越慢
ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};

然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。

代码如图所示：

打开“index.html”网页文件，最终效果如果所示：

7、网页设计请问这个滚动图片的代码是什么？

直接给你链接地址，你自己看
http://www.divcss5.com/css-texiao/texiao269.shtml

8、求网页设计中滚动图片代码

留邮箱，我明天上班发给你，我收集了很多js滚动焦点图的代码，还有其他的一些网页效果，再给你推荐一个网站：站酷，这个网站做的很好看，里面的素材也是相当的好，建议你去逛逛，里面一定有你需要的东西！

9、Dreamweaver制作图片左右滚动的完整代码怎么编写?

使用这个代码就可以了，而且可以稍微修改下的。

<marquee>标签是滚动字幕标签，里面可以嵌套很多标签，比如<p>标签、<a>标签、<img>标签，我给你的这个代码就是嵌套<img>标签的应用左右滚动可以

以下是这个标签的参数：

(1)scrollAmount：它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。

(2)width和height：表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。

(3)direction：表示滚动的方向，默认为从右向左(left)：可选的值有right、down、up。

10、网页制作中无限循环滚动的图片代码

我自己用jquery写的纵向的，想要横向的我可以帮你改改。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />
<title>无标题文档</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
var height = $("ul li").height();
var ul = $("ul");
var picTimer;
var btn = "<div class='scroll_btn pre'></div><div

class='scroll_btn next'></div>";
//$("ul").append(btn);
$("ul").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(
function() {
var field = $("ul

li:first");
field.animate

({marginTop:-height+'px'},600,function(){
field.appendTo

(ul).css('marginTop',0);
})
},3000
);
}).trigger("mouseleave");
//下一个需要研究
$(".pre").click(function() {
var field = $("ul li:first");
var lastField = $("ul li:last");
field.animate({marginTop:height

+'px'},600,function(){
lastField.insertBefore(field);
});
});

$(".next").click(function() {
var field = $("ul li:first");
field.animate

({marginTop:-height+'px'},600,function(){
field.appendTo

(ul).css('marginTop',0);
}) ;
});
});
</script>
<style type="text/css">
* { margin:0px; padding:0px;}
ul { width:200px; height:200px; border:1px solid #030;

position:relative; overflow:hidden;}
li { list-style:none; width:200px; height:200px; display:block;}
.scroll_btn { width:100px; height:20px; position:absolute;

background:#000; z-index:100}
.pre { left:10px; top:10px;}
.next { left:10px; bottom:10px;}
</style>
</head>

<body>
<ul>
<li style="background:red"></li>
<li style="background:green"></li>
<li style="background:blue"></li>
<li style="background:yellow"></li>
</ul>
</body>
</html>
记得：<script language="javascript" src="jquery.js"></script>
载入jquery工程才能看效果

导航:首页 > 万维百科 > 图片滚动样式网页设计代码

图片滚动样式网页设计代码

与图片滚动样式网页设计代码相关的知识