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

html-css010

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

打开 Dreamweaver

新建 HTML 文档；

修改标题为"跑马灯"

保存为 index.html 文件。

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

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

<div>

　<ul>

<li><img src="img/1.jpg" /></li>

<li><img src="img/2.jpg" /></li>

<li><img src="img/3.jpg" /></li>

<li><img src="img/4.jpg" /></li>

<li><img src="img/5.jpg" /></li>

<li><img src="img/6.jpg" /></li>

<li><img src="img/7.jpg" /></li>

　</ul>

</div>

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

　<div class="con">

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

<style type="text/css">

　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 库

　<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

引入 Marquee 插件

　<script type="text/javascript" src="marquee2.js"></script>

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

给 div 增加 marquee 类

　<div class="con marquee">

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

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

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

　up 上

　down 下

　left 左

　right 右

加入jquery的js然后

<script type="text/javascript">

$(document).ready(function() {

/*初始化的内容*/

}

</script>

<div id="demo" style="overflow:hiddenwidth:600pxcolor:#ffffff">

<table cellpadding="0" cellspacing="0" border="0">

<tr><td id="demo1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><img src="图片路径" width="100"></td>

<td><img src="图片路径" width="100"></td>

<td><img src="图片路径" width="100"></td>

<td><img src="图片路径" width="100"></td>

<td><img src="图片路径" width="100"></td>

</tr>

</table>

</td>

<td id="demo2" valign="top"></td>

</tr>

</table>

</div>

<script>

var speed=1//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>