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

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

页面html：

            

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

              

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

                "0"cellpadding="0"align="left"border="0"cellspace="0">

                  

                    

                    

                  

                

"demo1" valign="top" runat="server">

"demo2" valign="top">

              

              

            

          

cs后台代码：

private void BindPics(int comId)

  {

    List pic = DAO.PicDao.GetPics(comId);

    StringBuilder sb = new StringBuilder();

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

    {

      imgShows.InnerHtml = string.Empty;

      return;

    }

    sb.Append("");

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

    {

      Model.Pic p = pic[i];

      sb.Append("

");

    }

    sb.Append("

+ p.Href + ""> + p.Src + "" border='0' title="" + p.Title + "" alt="" + p.Title + "">

");

    demo1.InnerHtml = sb.ToString();

  }

数据库表：

USE [Enterprise]

GO

/****** 对象: Table [dbo].[Pics]  脚本日期: 03/17/2011 19:26:27 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

SET ANSI_PADDING ON

GO

CREATE 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]

 

GO

SET 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; }

  }

 　　2、使用JS实现图片轮播滚动跑马灯效果

　　教程效果图：

　　

　　HTML代码：

   

       

           

               
               
               
               
           

           

       

   

CSS代码：

JS代码：