这样：
<!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按钮边框圆角
用js的 event.keyCode来获取方向键。从网上你可以查到左右方向键对应的keyCode值，这样你就能获取到左右键点击事件了。
然后当左右键点击的时候，触发显示和隐藏对应图片的功能。
图片的显示和隐藏，你可以用js给对应的图片添加显示或者隐藏的css。
这样就能实现你要的效果了
这种插件非常多, 你可以挑一个用
如果你要问原理, 关键点是
外层div是一个窗口, 控制好长宽, 设置overflow为hidden, 那么只有在此区域内的内容才会被显示
内容是一堆图片, 通过js控制位置, 比如用relative定位, 通过css控制left, 就是移动效果
如果要轮播, 注意控制边界图片次序
