Javascript实现跑马灯效果的简单实例

页面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 = 10var demo = document.getElementById（"demo"）;var demo1 = document.getElementById（"demo1"）;var demo2 = document.getElementById（"demo2"）;demo2.innerHTML = demo1.innerHTMLfunction Marquee（） {if （demo2.offsetWidth - demo.scrollLeft <= 0）demo.scrollLeft -= demo1.offsetWidthelse {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（）;}

数据库表：

USE [Enterprise]GO/****** 对象: Table [dbo].[Pics]脚本日期: 03/17/2011 19:26:27 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOSET ANSI_PADDING ONGOCREATE TABLE [dbo].[Pics]（ [Id] [int] IDENTITY（1,1） NOT NULL, [ComId] [int] NOT NULL, [Title] [varchar]（50） COLLATE Chinese_PRC_CI_AS NULL, [Href] [varchar]（255） COLLATE Chinese_PRC_CI_AS NULL, [Src] [varchar]（255） COLLATE Chinese_PRC_CI_AS NOT NULL,PRIMARY KEY CLUSTERED （ [Id] ASC）WITH （IGNORE_DUP_KEY = OFF） ON [PRIMARY]） ON [PRIMARY]GOSET ANSI_PADDING OFF

实体类：

public class Pic{public int Id { set; get; }public int ComId { set; get; }public Model.CompanyModel CompanyModel { set; get; }public string Title { set; get; }public string Src { set; get; }public string Href { set; get; }}

以上这篇Javascript实现跑马灯效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。