当鼠标停在按钮上时，会出现对应的图片，用js...展开
heart阿飞55
TA获得超过1075个赞
就是要实现类似网页上滚动图片或者抽奖按钮的效果吧 1按Ctrl＋F8新建影片剪辑元件，把三张图片按Ctrl＋R导入放到舞台，做好图片循环播放的剪辑 2把剪辑从库拖到主场景舞台上，在下面属性面板的实例名称随意起名aaa 3按Ctrl＋F8再做个按钮（偷懒的话可以选窗口－公共库－按钮里面也有现成的） 4主场景时间轴上新建一层放在aaa那层的下面，把做好的三个按钮放在舞台合适位置 5比如要按钮A，B，C暂停对应的A，B，C图片，就选A按钮按F9贴上代码 on (press) { _root.aaa.gotoAndStop(1)} on (release) { _root.aaa.gotoAndPlay(1)} 代码意思是鼠标按下时aaa停止在第一帧，鼠标松开时aaa第一帧继续播放。其他按钮也同样方法，把代码稍微改下，比如按钮B，C对应的图片在第24帧和48帧上，按钮代码就把1换成24，48。 Ctrl＋Enter欣赏效果，图片循环播放，点按钮时停在对应的图片上，松开按钮图片继续循环播放。如果要做鼠标经过和离开实现图片停和放效果，就把代码的(press)换成（rollOver），（release）换成（rollOut）
这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态切换图片</title>
</head>
<style>
ul{
padding:0margin:0
}
li{
list-style: none
}
#pic{
position: relative
width: 400px
height: 400px
background-color:red
margin:100px auto
background:url('image/1.jpg') no-repeat center
}
#pic img{
width: 400px
height: 400px
}
#pic ul{
width: 50px
position: absolute
top: 0
right: -70px
}
li{
width: 40px
height: 40px
margin-bottom:10px
background-color: pink
float: left
}
#pic span{
position: absolute
bottom: 10px
left: 0
}
#pic p,#pic span{
width: 400px
height: 20px
}
#pic p{
position: absolute
top: 10px
left: 0
}
.active{
background-color: red
}
</style>
<body>
<div id="pic">
<img src="" alt="">
<p>qwrwe</p>
<span>werwer</span>
<ul>
</ul>
</div>
<script>
window.onload=function(){
//存放旧li
var oldLi=null
var num=0
var oPic = document.getElementById('pic')
var oImg = oPic.getElementsByTagName('img')[0]
var oUL = oPic.getElementsByTagName('ul')[0]
var oSpan= oPic.getElementsByTagName('span')[0]
var oP = oPic.getElementsByTagName('p')[0]
var oLi= oUL.getElementsByTagName('li')
var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg']
var aText = ['图片1','图片2','图片3','图片4']
for(var i=0i<arr.lengthi++){
//动态添加元素
oUL.innerHTML+='<li></li>'
}
// 旧li就等于当前的
oldLi=oLi[num]
// 初始化
oImg.src=arr[num]
oP.innerHTML=num+1+'/'+arr.length
oSpan.innerHTML=aText[num]
oLi[num].className='active'
for(var i=0i<arr.lengthi++){
// 给元素自定义属性
//
oLi[i].index=i
oLi[i].onclick=function(){
// 当元素被点击时图片文字信息都一起变化
oImg.src=arr[this.index]
oP.innerHTML=1+this.index+'/'+arr.length
oSpan.innerHTML=aText[this.index]
// 清空上一个 当前添加
oldLi.className=''
//将上一个给当前
oldLi=this
this.className='active'
}
}
}
</script>
</body>
</html>
扩展资料：
注意事项
1、可以通过JS删除和添加hidden属性，改用style.display="none"和style.display="inline"来实现隐藏和显示。
2、button属性，主要的问题时button样式的问题，如何才能做一个好看的button，通过查找找到了设置button相关的值。
border:none设置按钮无边框
outline:none消除按钮点击后出现的表示被点击的边框
background：url(...)按钮背景图片
text-shadow: 0 1px 1px rgba(0,0,0,.3)文字阴影
box-shadow: 0 5px 7px rgba(0,0,0,.2)按钮阴影
border-radius:15px按钮边框圆角
<div id="图片显示区"></div><div id="按钮">
<input type="button" value="蒙娜丽莎" onclick="图片显示区.innerHTML='<img src=1.jpg>'">
<input type="button" value="最后的晚餐" onclick="图片显示区.innerHTML='<img src=2.jpg>'">
</div>
这是最容易看懂的方式了，但代码有点臃肿，不方便维护，如果把按钮内容和图片名存入数组或对象，用函数切换比较方便维护。
