如何用Dreamweaver制作网页动态展示的图片？
导读：本文共1726字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：dw中可以用组图轮播的方式实现动态展示图片。参考：在DW中插入一个图片，然后回车重复步骤1直到所有图片添加完成选择所有图片，格式菜单－〉列表－〉项目列表，制作一个图片列表然后再插入一个div，id命名为“LunBoNum”，在div内写入代码如下：<span class="CurrentNum">1</span><span>2</spa... ...
目录
(为您整理了一些要点),点击可以直达。
dw中可以用组图轮播的方式实现动态展示图片。参考：在DW中插入一个图片，然后回车重复步骤1直到所有图片添加完成选择所有图片，格式菜单－〉列表－〉项目列表，制作一个图片列表然后再插入一个div，id命名为“LunBoNum”，在div内写入代码如下：<span class="CurrentNum">1</span><span>2</span><span>3</span><span>4</span><span>5</span>插入一个新id为“LunBo”的div，并包含如上全部内容，代码如下：<div class="LunBo"><ul><li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li><li><img src="images/2.jpg" width="490" height="170"></li><li><img src="images/3.jpg" width="490" height="170"></li><li><img src="images/4.jpg" width="490" height="170"></li><li><img src="images/5.png" width="490" height="170"></li></ul><div class="LunBoNum"><span class="CurrentNum">1</span><span>2</span><span>3</span><span>4</span><span>5</span></div></div>在网页的<head></head>代码间加入jQuery框架链接<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>编写JS代码如下<script type="text/javascript" language="javascript">var PicTotal = 5;// 当前图片总数var CurrentIndex;// 当前鼠标点击图片索引var ToDisplayPicNumber = 0;// 自动播放时的图片索引$("div.LunBo div.LunBoNum span").click(DisplayPic);function DisplayPic() {// 测试是父亲的第几个儿子CurrentIndex = $(this).index();// 删除所有同级兄弟的类属性$(this).parent().children().removeClass("CurrentNum")// 为当前元素添加类$(this).addClass("CurrentNum");// 隐藏全部图片var Pic = $(this).parent().parent().children("ul");$(Pic).children().hide();// 显示指定图片$(Pic).children("li").eq(CurrentIndex).show();}function PicNumClick() {$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;setTimeout("PicNumClick()",1000);}setTimeout("PicNumClick()",1000);</script>链接CSS文件，文件内容如下* {margin: 0px;padding: 0px;font-size: 14px;}div.LunBo {position: relative;list-style-type: none;height: 170px;width: 490px;}div.LunBo ul li {position: absolute;height: 170px;width: 490px;left: 0px;top: 0px;display: none;}div.LunBo ul li.CurrentPic {display: block;}div.LunBo div.LunBoNum {position: absolute;left: 374px;bottom: 11px;width: 83px;text-align: right;background-color: #999;padding-left: 10px;}div.LunBo div.LunBoNum span {height: 20px;width: 15px;display: block;line-height: 20px;text-align: center;margin-top: 5px;margin-bottom: 5px;float: left;cursor: pointer;}div.LunBo div.LunBoNum span.CurrentNum {background-color: #3F6;
如何用Dreamweaver制作网页动态展示的图片？的详细内容，希望对您有所帮助，信息来源于网络。