如何使用dreamweaver cs3处理图片滚动？
在制作公司的网站的时候，想把公司的产品图片放置在页面上不停的滚动，更新，我已经把图片处理好也已经布局好，但是如何使图片滚动起来呢？...
在制作公司的网站的时候，想把公司的产品图片放置在页面上不停的滚动，更新，我已经把图片处理好也已经布局好，但是如何使图片滚动起来呢？
展开
3个回答
展开全部
可以用iframe（弊端是图片滚动的时候中间会有一段空白）,或者找一段JS代码（可以做到无缝隙的滚动），JS代码如下：<!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>
</head>
<body>
<TABLE style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"
cellSpacing=0 cellPadding=0 width=550 align=center border=0>
<TBODY>
<TR>
<TD>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top><table width="1730" height="16" border="0" align="left" cellpadding="0" cellspacing="0">
<tr align="center">
<td width='170'><a href='http://www.sina.com.cn'><img src='../images/sina_logo2.gif' width='170' height='100' border='0'></a></td>
<td width='170'><a href=''><img src='../images/sy1.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy5.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy4.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy8.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy7.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy5.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy4.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy3.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy2.jpg' width='170' height='100' border='0'></a></td>
</tr>
</table></TD>
<TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>
</TD></TR></TBODY></TABLE></TD></TR></TABLE>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<TABLE style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"
cellSpacing=0 cellPadding=0 width=550 align=center border=0>
<TBODY>
<TR>
<TD>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top><table width="1730" height="16" border="0" align="left" cellpadding="0" cellspacing="0">
<tr align="center">
<td width='170'><a href='http://www.sina.com.cn'><img src='../images/sina_logo2.gif' width='170' height='100' border='0'></a></td>
<td width='170'><a href=''><img src='../images/sy1.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy5.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy4.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy8.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy7.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy5.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy4.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy3.jpg' width='170' height='100' border='0'></a></td>
<td width='170'><a href='#'><img src='../images/sy2.jpg' width='170' height='100' border='0'></a></td>
</tr>
</table></TD>
<TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>
</TD></TR></TBODY></TABLE></TD></TR></TABLE>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
