js实现无缝跑马灯效果（图片轮播滚动跑马灯效果）

1、js实现无缝跑马灯效果

页面html：

<div>

            <div id="imgShows" runat="server" style="padding-bottom: 10px;">

              <div id="demo" style="overflow: hidden; width: 100%; height: 190px">

                <table cellspacing="0" cellpadding="0" align="left" border="0" cellspace="0">

                  <tr>

                    <td id="demo1" valign="top" runat="server">

                    </td>

                    <td id="demo2" valign="top">

                    </td>

                  </tr>

                </table>

              </div>

              <script type="text/javascript">

                var speed = 10

                var demo = document.getElementById("demo");

                var demo1 = document.getElementById("demo1");

                var demo2 = document.getElementById("demo2");

                demo2.innerHTML = demo1.innerHTML

                funcTIon Marquee() {

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

                    demo.scrollLeft -= demo1.offsetWidth

                  else {

                    demo.scrollLeft++

                  }

                }

                var MyMar = seTInterval(Marquee, speed)

                demo.onmouseover = funcTIon () { clearInterval(MyMar) }

                demo.onmouseout = funcTIon () { MyMar = setInterval(Marquee, speed) }

              </script>

            </div>

          </div>

cs后台代码：

private void BindPics(int comId)

  {

    List<Model.Pic> pic = DAO.PicDao.GetPics(comId);

    StringBuilder sb = new StringBuilder();

    if (pic == null || pic.Count < 1)

    {

      imgShows.InnerHtml = string.Empty;

      return;

    }

    sb.Append("<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\"cellspacing=\"10px\"><tr>");

    for (int i = 0; i < pic.Count; i++)

    {

      Model.Pic p = pic[i];

      sb.Append(" <td width=\"200\"><a href=\"" + p.Href + "\"><img src=\"../" + p.Src + "\" border='0' title=\"" + p.Title + "\" alt=\"" + p.Title + "\"></a></td>");

    }

    sb.Append("</tr></table>");

    demo1.InnerHtml = sb.ToString();

  }

技术专区

• Alexa语音服务软件扩展STM32Cube
• 结合DNN API驱动未来神经网络应用的解决方案
• 针对于高端移动通信和汽车市场的四集群设计
• 一款基于帧捕捉的开源图形调试器应用设计
• 即将成为标准配置的最新安全技术：后视摄像系统