参考：在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
需要丛明这样，如果是flash动画。需要再dw中的菜单中选择插入>媒体>你颂郑仔的flash路径这里需要注意的是导入后你看到dw页面中的路径不能是物理路径如(E:///之类的)要野汪是相对路径（也就是多媒体相对与页面的路径）如：../abc/**这样的。再ie浏览的时候就可以看到了欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）