jquery跑马灯 图片不间断滚动效果

jquery跑马灯 图片不间断滚动效果

在网页中为了显示更多内容,界面更美观,通常会用到“跑马灯”效果。

打开 Dreamweaver

新建 HTML 文档;

修改标题为"跑马灯"

保存为 index.html 文件。

首先,编写跑马灯部分的静态 HTML 代码,把图片排列起来

在 和 标签中添加以下代码:

 

      

  •   

  •   

  •   

  •   

  •   

  •   

  •  

给上一步的 HTML 代码中的 div 标签增加 class 属性,如下:

 

编写跑马灯部分的 CSS 样式代码,代码放在 和 标签中,如下:

引入 JQuery 库

 

引入 Marquee 插件

 

代码放在 标签前,如图:

给 div 增加 marquee 类

 

保存文件,在浏览器中打开,就可以看到图片开始滚动了。

图片默认的滚动方向是“向上滚动”

如果要修改图片滚动的方向,可以给 div 指定 direction 属性,属性值可以取:

 up 上

 down 下

 left 左

 right 右

完整的例子放在百度网盘中,需要的请发邮件到 xdhy_dn@foxmail.com

主题写 “百度经验”。自动回复下载地址。