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

1、素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的是必不可少的；

2、在电脑上找到并且打开Dreamweaver8，重新建立一个网页文件，并且把网页文件保存，且命名为“indexhtml"文件；

3、在完成网页文件保存和命名为“indexhtml"文件以后，切换至代码编辑界面，输入相应的程序代码；

4、新建一CSS样式表文件，并将该文件保存到与“indexhtml”相同的目录下，文件名称为“MyStylecss"；

5、在样式表文件"MyStylecss”文件的完成以后，打开样式表文件"MyStylecss”文件输入相应的程序代码；

6、在网页文件"indexhtml"中添加对该样式表的引用：“<link rel="stylesheet" type="text/css" href="MyStylecss">”，同时新建一个JS文件，并将该文件另存为“MoveEffectjs"；

7、在JS文件”MoveEffectjs“文件建立完成以后，同样打开JS文件”MoveEffectjs“文件输入程序的代码；

8、完成上述程序运行以后，在主页文件"indexhtml”中添加对该“MoveEffectjs”文件的引用，“<script type="text/javascript" src="MoveEffectjs"></script>”，打开“indexhtml”网页文件即可。

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 600px; HEIGHT: 190px; top:485px; left:252px;position: absolute;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id=demo1>
<!-- 要循环滚动的 -->
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="200" align="center" style="height: 151px">
<a href="WebDeSignaspx">
<img src="images/indexpic1gif" width="194" height="147" border="0" /></a>
</td>
<td width="200" align="center" style="height: 151px">
<a href="SoftWareaspx">
<img src="images/indexpic2gif" width="194" height="147" border="0" /></a>
</td>
<td align="center" style="height: 151px; width: 200px;">
<a href="VhostIndexaspx">
<img src="images/indexpic3gif" width="194" height="147" border="0" /></a>
</td>
</tr>
</table>
</td>
<TD id=demo2 width=1></TD>
</tr>
</table>
</DIV>
<SCRIPT>
var speed=30//速度数值越大速度越慢
var demo2 = documentgetElementById("demo2");
var demo = documentgetElementById("demo");
var demo1 = documentgetElementById("demo1");
demo2innerHTML=demo1innerHTML
function Marquee(){
if(demo2offsetWidth-demoscrollLeft<=0)
demoscrollLeft-=demo1offsetWidth
else{
demoscrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demoonmouseover=function() {clearInterval(MyMar)}
demoonmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>

你可以参考一下如下代码
<title>javascript轮换</title>
<style type="text/css">
#album{
position:relative;
width:400px;
height:300px;
border:10px solid #EFEFDA;
overflow:hidden;
}
#album dt {
margin:0;
padding:0;
width:400px;
height:300px;
overflow:hidden;
}
#album img {
border:2px solid #000;
}
#album dd {
position:absolute;
right:0px;
bottom:10px;
}
#album a {
display:block;
float:left;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:#808080;
background:transparent url(/jscss/demoimg/200910/o_buttongif) no-repeat -15px 0;
}
#album a:hover ,#album ahover{
color:#F8F8F8;
background-position:0 0;
}
</style>
<dl id="album">
<dt>
<img id="index1" alt=余秋的黄昏" src="E:\公司网站\image\wall3jpg" />
<img id="index2" alt="美丽欧洲" src="E:\公司网站\image\wall4jpg" />
<img id="index3" alt="巨石阵的神秘" src="E:\公司网站\image\wall5jpg" />
</dt>
<dd>
<a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a>
</dd>
</dl>
<script type="text/javascript">
function imageRotater(id){
var cases = "",
album = documentgetElementById(id),
images = albumgetElementsByTagName("img"),
links = albumgetElementsByTagName("a"),
dt = albumgetElementsByTagName("dt")[0],
length = imageslength,
aIndex = 1,
aBefore = length;
for(var i=0;i< length;i++){
cases += images[i]id + ':"'+images[i]getAttribute("src")+'",'
}
images[0]stylecssText = "position:absolute;top:0;left:0;";//修正位置错误
var tip = documentcreateElement("dd");
tipstylecssText = "position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";
albuminsertBefore(tip,dtnextSibling);
if(!+"\v1"){
tipstylecolor = "#369";
tipstylefilter = "alpha(opacity=67)"
}else{
tipstylecssText += "background: rgba(164, 173, 183, 65);"
}
cases = eval("({"+casesreplace(/,$/,"")+"})");
for(var i=0;i<length;i++){
links[i]onclick = function(e){
e =e || windowevent;
var index = thistoString()split("#")[1];
aIndex = indexcharAt(indexlength-1);//☆☆☆☆
images[0]src = cases[index];
tipinnerHTML = images[aIndex -1]getAttribute("alt");
!+"\v1" (ereturnValue = false) :(epreventDefault());
}
}
var prefix = images[0]idsubstr(0,images[0]idlength -1);
(function(){
setTimeout(function(){
if(aIndex > length){
aIndex = 1;
}
images[0]src = cases[prefix+aIndex];
tipinnerHTML = images[aIndex -1]getAttribute("alt");
tipstylebottom = "-40px";
links[aBefore-1]className = "";
links[aIndex-1]className = "hover";
aBefore = aIndex;
aIndex++;
move(tip);
setTimeout(argumentscallee,1500)
},1500)
})()
var move = function(el){
var begin = parseFloat(elstylebottom),
speed = 1;
elbottom = begin;
(function(){
setTimeout(function(){
elstylebottom = elbottom + speed + "px";
elbottom += speed;
speed = 15;//下一次移动的距离
if(elbottom >= 0){
elstylebottom = "0px";
}else{
setTimeout(argumentscallee,23);
}
},25)
})()
}
}
windowonload = function(){
try{documentexecCommand("BackgroundImageCache", false, true);}catch(e){};
imageRotater("album");
}
</script>

css代码：
rotator
{
text-align:center;
}
rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
rotator img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
/360deg是360度，度你可以自己写/

<style type="text/css">
box{height: 700px;width: 400px;overflow: hidden;overflow-y: auto;}
img{width: 400px;height: 600px;float: left;}
img:nth-child(1){background: red;}
img:nth-child(2){background: pink;}
img:nth-child(3){background: yellow;}
img:nth-child(4){background: green;}
</style>
<div class="box">
<div class="img">

</div>
<div class="img">

</div>
<div class="img">

</div>
<div class="img">

</div>
</div>

需要准备的材料分别有：电脑、chrome浏览器、html编辑器。

1、首先，打开html编辑器，新建一个html文件，例如：indexhtml，填充问题基础代码。

2、在indexhtml中的<img>标签，输入html代码：style="margin: 15px 20px 25px 30px;"。

3、浏览器运行indexhtml页面，此时被成功移动了位置到距离左侧30像素，上方15像素。

<marquee direction=方向 loop=循环次数 behavior=滚动形式 dataformatas=文字类型 width=字符滚动窗口的宽度 height=字符滚动窗口的高度 scrolldelay=每次循环的间隔时间 scrollamount=每次移动的长度 bgcolor=滚动窗口的背景颜色 >
…………要滚动的文字…………
</marquee>

---