javascript控制html图片/文本循环不间断滚动

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">&nbsp;</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.onmouseover=stopMove;  //鼠标移上时清除定时器达到滚动停止的目的(调用的第一种方法)
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器,继续滚动//(调用的第二种方法)
</SCRIPT>



备注:可以通过id的名字直接把该标签当做对象来使用!不过前提是JavaScript代码必须写字body的层后面,因为JavaScript的运行方式是逐行解释执行的!否则demo这个名称不被认为是对象

你可能感兴趣的:(JavaScript,html)