这样：
<!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按钮边框圆角
代码示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title></title>
</head>
<body>
<script>
window.onload=function(){
var Imgbtn=document.getElementById('btn')
var Img=document.getElementById('img')
Imgbtn.onclick=function(){
if(Img.src=='http://dl.bizhi.sogou.com/images/2012/01/19/191337.png') {
Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg'
}else{
Img.src='http://dl.bizhi.sogou.com/images/2012/01/19/191337.png'
}
}
}
</script>
<div id="bg">
<div id="btn">
<div id="txt">试客小兵</div>
<img id="img" src="http://dl.bizhi.sogou.com/images/2012/01/19/191337.png">
</div>
</div>
</body>
</html>
扩展资料：
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
参考资料：javascript_百度百科
1、提前准备一组图片，将图片名称设置一定规律：例如 img1.jpg、img2.jpg
2、编写鼠标点击事件
3、在鼠标点击时间里，判断鼠标点击次数
4、根据不同次数，显示不同的图片
<script type="text/javascript">$(function(){
var items=new Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg")
var i=0
$("#bgImage").click(function(){
i++
if(i>items.length){
i=1
}
$(this).prop("src","img"+i+".jpg")
})
})
</script>
