这样：
<!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按钮边框圆角
实现轮播图思路
布局：
1. 使用 flex 布局使子元素水平排列；
2. 子元素宽度设置100%，flex-shrink 设置为 0（这个属性保证子元素不被压缩）
定时器无缝轮播：
轮播之前需要将首尾各添加一张图片。其目的就是实现无缝轮播。
然后将父元素 left 向左移动一个屏幕宽度的距离。这样才能让第二张（因为首尾各添加了一张图片，所以原先的第一张就变成了第二张）变成可视范围的第一张。
轮播到最后一张图片（这里的最后一张指的是拼接的第一张）时；
①清除掉定时器；
②开启临界处理（重置父元素的left）；
③开启下一轮轮播。
这里是实现无缝轮播的关键；其目的是播放最后一张的同时，与第一张偷梁换柱。因为最后一张与第一张图片相同，所以快速地改变其 left 用户并无感知。并且同时开启下一轮定时器，1.5s 之后执行第二张图片播放。而这个 1.5s 之内就好了准备（清除当前定时器，重置父元素 left）。
右边按钮点击无缝轮播：
逻辑同定时器无缝轮播类似，因为方向都是从右向左播放。无缝轮播的核心都是播放到最后一张时偷梁换柱（播放最后一张图片的1.5s 同时，改变父元素 left 成初始值，负数的屏幕宽度）。
左边按钮点击无缝轮播：
左边按钮无缝轮播的核心与以上差不多，唯一的区别就是当播放到第一张图片时，开始偷梁换柱（播放第一张图片的1.5s 同时，改变父元素 left 成最大值，负数的（屏幕宽度*（子元素个数-2）））。
指示灯点击无缝轮播：
点击第一张图片时，同左边按钮点击无缝轮播。点击最后一张图片时，同右边按钮点击无缝轮播。
