1.首先在创建一个层,可以是绝对定位层,也可以是某个单元格内的相对定位层!
2.在层中创建一个1行2列的表格
3.给层id命名为demo,给第一个单元格命名为demo1,第二个单元格命名为demo2
4.根据所要显示的宽度和高度给层的style手动写入style="overflow:hidden;width:700px;height:190px;"
5.在第一个单元格中横向插入width大于350px,height=190px的图片(大于)2张
eg:<TR>
<TD><div id="demo" style="overflow:hidden;width:700px;height:190px;">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="demo1"><img src="image/1.jpg" width="360" height="190"><img src="image/2.gif" width="360" height="190"><img src="image/3.jpg" width="360" height="190"><img src="image/ad-01.jpg" width="360" height="190"><img src="image/ad-02.jpg" width="360" height="190"><img src="image/ad-03.jpg" width="360" height="190"><img src="image/ad-04.jpg" width="360" height="190"></td>
<td id="demo2"> </td>
</tr>
</table>
</div></TD>
</TR>
6.编写JavaScript代码
eg:<SCRIPT>
var speed=5; //设置图片滚动速度
demo2.innerHTML=demo1.innerHTML; //复制demo1为demo2(直接把id名称作为该标签的对象)
function Marquee(){
if(demo1.offsetWidth==demo.scrollLeft) //当滚动至demo1与demo2交界时
{
demo.scrollLeft=0; //dome跳到最左端
}
else
{
demo.scrollLeft++;
}
}
//鼠标移上时清除定时器达到滚动停止的目的
function stopMove()
{
clearInterval(MyMar);
}
var MyMar=setInterval(Marquee,speed); //设置定时器
demo.οnmοuseοver=stopMove; //鼠标移上时清除定时器达到滚动停止的目的(调用的第一种方法)
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器,继续滚动//(调用的第二种方法)
</SCRIPT>
备注:可以通过id的名字直接把该标签当做对象来使用!不过前提是JavaScript代码必须写字body的层后面,因为JavaScript的运行方式是逐行解释执行的!否则demo这个名称不被认为是对象
2.在层中创建一个1行2列的表格
3.给层id命名为demo,给第一个单元格命名为demo1,第二个单元格命名为demo2
4.根据所要显示的宽度和高度给层的style手动写入style="overflow:hidden;width:700px;height:190px;"
5.在第一个单元格中横向插入width大于350px,height=190px的图片(大于)2张
eg:<TR>
<TD><div id="demo" style="overflow:hidden;width:700px;height:190px;">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="demo1"><img src="image/1.jpg" width="360" height="190"><img src="image/2.gif" width="360" height="190"><img src="image/3.jpg" width="360" height="190"><img src="image/ad-01.jpg" width="360" height="190"><img src="image/ad-02.jpg" width="360" height="190"><img src="image/ad-03.jpg" width="360" height="190"><img src="image/ad-04.jpg" width="360" height="190"></td>
<td id="demo2"> </td>
</tr>
</table>
</div></TD>
</TR>
6.编写JavaScript代码
eg:<SCRIPT>
var speed=5; //设置图片滚动速度
demo2.innerHTML=demo1.innerHTML; //复制demo1为demo2(直接把id名称作为该标签的对象)
function Marquee(){
if(demo1.offsetWidth==demo.scrollLeft) //当滚动至demo1与demo2交界时
{
demo.scrollLeft=0; //dome跳到最左端
}
else
{
demo.scrollLeft++;
}
}
//鼠标移上时清除定时器达到滚动停止的目的
function stopMove()
{
clearInterval(MyMar);
}
var MyMar=setInterval(Marquee,speed); //设置定时器
demo.οnmοuseοver=stopMove; //鼠标移上时清除定时器达到滚动停止的目的(调用的第一种方法)
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器,继续滚动//(调用的第二种方法)
</SCRIPT>
备注:可以通过id的名字直接把该标签当做对象来使用!不过前提是JavaScript代码必须写字body的层后面,因为JavaScript的运行方式是逐行解释执行的!否则demo这个名称不被认为是对象