网页设计图片滚动代码_网页中的滚动图片的代码怎么写

1、网页制作图片滚动

<marquee direction=up height=75 onMouseOut=this.start() onMouseOver=this.stop() scrollamount=1 scrolldelay=100 width="180" id=MARQUEE1>滚动内容</marquee>

Direction 参数可设置:up down left right (控制滚动方向)

Scrolldelay = 100 (100就是速度，值越大滚动越快……)

onMouseOut=this.start() ........鼠标移出状态滚动

onMouseOver=this.stop() .........鼠标经过时停止滚动

基本语法
<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>

2、网页中的滚动图片的代码怎么写？

网页中的滚动图片的代码有上下左右四个方向，分别是：

<head>

<----->

</head>

<body>

<！--向上滚动代码开始-->

</div>

</div>

var speed=30;

var colee2=document.getElementById("colee2");

var colee1=document.getElementById("colee1");

var colee=document.getElementById("colee");

colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2

function Marquee1(){

//当滚动至colee1与colee2交界时

if(colee2.offsetTop-colee.scrollTop<=0){

colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端

}else{

colee.scrollTop++

}

var MyMar1=setInterval(Marquee1,speed)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

colee.onmouseover=function() {clearInterval(MyMar1)}

//鼠标移开时重设定时器

colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}

</script>

</div>

</div>

var speed=30

var colee_bottom2=document.getElementById("colee_bottom2");

var colee_bottom1=document.getElementById("colee_bottom1");

var colee_bottom=document.getElementById("colee_bottom");

colee_bottom2.innerHTML=colee_bottom1.innerHTML

colee_bottom.scrollTop=colee_bottom.scrollHeight

function Marquee2(){

if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)

colee_bottom.scrollTop+=colee_bottom2.offsetHeight

else{

colee_bottom.scrollTop--

}

var MyMar2=setInterval(Marquee2,speed)

colee_bottom.onmouseover=function() {clearInterval(MyMar2)}

colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}

</script>

</tr>

</table>

</td>

</tr>

</table>

</div>

//使用div时，请保证colee_left2与colee_left1是在同一行上.

var speed=30//速度数值越大速度越慢

var colee_left2=document.getElementById("colee_left2");

var colee_left1=document.getElementById("colee_left1");

var colee_left=document.getElementById("colee_left");

colee_left2.innerHTML=colee_left1.innerHTML

function Marquee3(){

if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度

colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度

else{

colee_left.scrollLeft++

}

var MyMar3=setInterval(Marquee3,speed)

colee_left.onmouseover=function() {clearInterval(MyMar3)}

colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

</script>

</tr>

</table>

</td>

</tr>

</table>

</div>

var speed=30//速度数值越大速度越慢

var colee_right2=document.getElementById("colee_right2");

var colee_right1=document.getElementById("colee_right1");

var colee_right=document.getElementById("colee_right");

colee_right2.innerHTML=colee_right1.innerHTML

function Marquee4(){

if(colee_right.scrollLeft<=0)

colee_right.scrollLeft+=colee_right2.offsetWidth

else{

colee_right.scrollLeft--

}

var MyMar4=setInterval(Marquee4,speed)

colee_right.onmouseover=function() {clearInterval(MyMar4)}

colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}

</script>

(2)网页设计图片滚动代码扩展资料：

代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。源代码是代码的分支，某种意义上来说，源代码相当于代码。

现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可读文本翻译成为计算机可执行的二进制指令，这种过程叫编译，它由通过编译器完成。

源代码（也称源程序），是指一系列人类可读的计算机语言指令。

源代码是相对目标代码和可执行代码而言的。源代码就是用汇编语言和高级语言写出来的地代码。目标代码是指源代码经过编译程序产生的能被cpu直接识别二进制代码。可执行代码就是将目标代码连接后形成的可执行文件，当然也是二进制的。

在现代程序语言中，源代码可以是以书籍或者磁带的形式出现，但最为常用的格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码的最终目的是将人类可读的文本翻译成为计算机可以执行的二进制指令，这种过程叫做编译，通过编译器完成。

参考资料：网络-计算机代码

3、网页制作怎样让图片滚动？

网页图片无缝滚动实现代码：
<style type="text/css">

</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><a href="#"><img src="http://boaer.comimg/temp01.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp02.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp03.gif" height="110" /></a><span><a href="#">产品名称</a></span></li>
</ul></div><div id="图片展示代码例子"></div></div></div><script>

</script></td>
</tr>
</table>

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

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

5、网页制作中常用的代码有？比如说图片滚动代码，图片切换代码，文字排版代码等。急需

试试这个图片切换

有12345数字一起切换

鼠标点一下数字会变换到另一张图片，不点就会自动换

里面有教程和源码

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

我自己用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工程才能看效果

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

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

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

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

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

以下是这个标签的参数：

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

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

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

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

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

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

网页设计图片滚动代码

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