dreamweaver网页制作中，怎样实现图片的走马灯效果_IT百科

打开 Dreamweaver

新建 HTML 文档；

修改标题为"跑马灯"

保存为 index.html 文件。

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

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

<div>

　<ul>

　</ul>

</div>

给上一步的 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 库

引入 Marquee 插件

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

给 div 增加 marquee 类

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

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

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

　up 上

　down 下

　left 左

　right 右

走马灯你可以吧所有的图片组合成一个图片放到flash里边

如果是鼠标放上停止的话就得用遮罩了遮罩上放个按钮加动作

经过-停止离开-播放

图片首尾连接的话就是第一张和最后一张一样的然后最后一帧上加命令

gotoAndPlay(5) 最后一个图片走完正好是第一张图片第5帧的位置就可以连上了

不明白可以呼我！看到必回

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

dreamweaver网页制作中，怎样实现图片的走马灯效果