这样：
<!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按钮边框圆角
这个是在将按钮转换成图片的形式。<style>.input{ background:url(images/14.png)}
</style>
</head>
<body>
<form action="#" method="get">
<input id="inpt" type="text">
<input name="send" type="submit" class="input" id="send2" value=" 登陆 " onClick="return Check()" onFocus="this.blur()">
<input name="reset" type="reset" class="input" id="reset2" value=" 重置 " onFocus="this.blur()">
</form>
</body>
如果要鼠标移动改变背景颜色的话,加上如下js。<html>
<head>
<title>改变按钮背景</title>
<script type="text/javascript">
//移入时背景变绿
function change(over){
over.style.backgroundColor = 'green'
}
//移开时背景变红
function show(out){
out.style.backgroundColor = 'red'
}
</script>
</head>
<body >
<input id="button" type="button" name="Submit" value="移过来看看" onmouseover="change(this)" onmouseout="show(this)" />
</body>
</html>
<div class="upload-img-box" ref="moveWrap"><div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)">
<img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/>
</div>
<div class="img-plus" @click="toBIgChange()"><span class="tip">放大</span></div>
<div class="img-minus" @click="toSmallChange()"><span class="tip">缩小</span></div>
<div class="img-rotate" @click="toRotate()"><span class="tip">旋转</span></div>
</div>
