网页中的动态图片是gif格式文件，Dreamweaver8中插入方法如下：
1、启动Dreamweaver，ctrl+n新建html文档；
2、点击插入菜单图像命令；
3、打开对话框选择要插入的gif文件，点击确定；
4、按ctrl+s保存文件，然后按F12打开浏览器预览即可。
方法步骤如下：
1、首先打开计算机，在计算机内打开Dreamweaver软件，鼠标左键选择新建【HTML】，在代码窗口上，修改网页title标签，比如设置表格的背景图片。
2、接着，鼠标左键单击菜单，添加【表格】，在d出的【表格设置】的窗口上，输入表格的行数和列数，并设置表格的宽度。
3、接着，在【设计】窗口上，在表格的标题栏中输入风景图片的文字。
4、然后，鼠标左键单击【代码】窗口，在table标签处的代码中，选择下来菜单中，背景图片的属性。
5、接着，在代码行中，看浏览按钮，单击可以选择背景图片。
6、然后，在d出的选择窗口中任意选择一张图片。
7、接着，可以看到代码中会自动添加图片的路径代码。
8、然后就可以发现成功的使用DW cs-6把单个表格添加背景图片了。
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
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）