图片轮显

最新推荐文章于 2024-09-05 10:35:46 发布

原创最新推荐文章于 2024-09-05 10:35:46 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

JSP 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的图片滚动展示效果。通过设置定时器，可以使图片在固定区域内平滑滚动显示，同时提供了鼠标悬停停止滚动的功能。

<form id="form1">
<div align='center' id='demo' style='overflow:hidden;height:130px;width:675px;'>
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
  <td width="287" valign='top' id='demo1'>
     <table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
    <tr valign='top'>
     <s:iterator value="#session.listName" id="fileName">
      <td align="center"><img src=${fileName } width="153" height="143" ></td>
     </s:iterator>
    </tr>
   </table>

   <td width="12" valign=top id=demo2>log</td>
</tr>
</table>
<script>
    var speed=15
    demo2.innerHTML=demo1.innerHTML
    function Marquee1()

    {
       if(demo2.offsetWidth-demo.scrollLeft<=0)
        demo.scrollLeft-=demo1.offsetWidth
        else

        {
             demo.scrollLeft++
        }
    }
    var MyMar1=setInterval(Marquee1,speed)
    demo.onmouseover=function() {clearInterval(MyMar1)}
    demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
</div>
</form>