HTML标题实现走马灯的效果_随笔

<!DOCTYPE html>

<head>

<title>让scroll每隔2000毫秒就执行scroll()一次，从而实现走马灯的效果 </title>

</head>

<body>

</body>

</html>

打开 Dreamweaver

新建 HTML 文档；

修改标题为"跑马灯"

保存为 index.html 文件。

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

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

在 <body>和 </body>标签中添加以下代码：

<div>

　<ul>

　</ul>

</div>

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

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

编写跑马灯部分的 CSS 样式代码，代码放在 <head>和 </head>标签中，如下：

　ul{list-style:nonepadding:0margin:0}

　.con{ width:1105pxheight:225pxoverflow:hiddenborder:2px solid #666margin:10px auto 0 autopadding:5px 0 0 5px}

　.con ul li{ float:leftmargin:0 5px 10px 0}

　.con ul li img{ display:blockwidth:209pxheight:209pxpadding:2pxborder:1px solid #ccc}

</style>

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

引入 JQuery 库

引入 Marquee 插件

代码放在 </body>标签前，如图：

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

给 div 增加 marquee 类

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

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

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

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

　up 上

　down 下

　left 左

　right 右

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

完整的例子放在百度网盘中，需要的请发邮件到 [email protected]

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

欢迎分享，转载请注明来源：内存溢出

HTML标题实现走马灯的效果