这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态切换图片</title>
</head>
<style>
ul{
padding:0;margin: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=0;i<arr.length;i++){
//动态添加元素
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=0;i<arr.length;i++){
// 给元素自定义属性
//
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;按钮边框圆角
javascript脚本语言:可以通过对DOM的操作, 来切换图片.
一: 实现的主要步骤
1: 定义一个图片路径的数组,存放图片的路径 ,同时定义一个字符串数组,保存与图片匹配的文字描述
2:封装两个方法,一个方法(function prevImg(){ })用于显示前一张图片和文字描述,一个(function nextImg(){ })用于显示后一种图片和相关的文字描述.
3:把方法绑定给按钮的点击事件button.onclick = 方法名
二: 其他细节 和注意事项
1: 注意事项一: 图片循环切换
如果图片已经是第一张了,还要查看前一张,那么图片跳到最后一张
如果图片已经是最后一张了,还要查看后一张,那么图片跳到第一张
原因: 这样做可以让图片的显示,较为人性化
2: 注意事项二: 左右按钮可以切换图片 同时也支持键盘的方向键切换图片
原因: 更加人性化和便利用户的操作
三: 完整的代码 和 测试效果图
效果图
完整的参考代码和详细的说明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {/*设置整个图片框的外观*/
margin: 50px auto 0px;
position: relative;
width: 320px;
height: 480px;
background: #B6C7E5;
border: 10px solid #C0C0C0;
}
a {/*设置链接的样式*/
font-size: 20px;
line-height: 25px;
text-align: center;
text-decoration: none;
width: 25px;
height: 25px;
opacity: 0.8;
filter: alpha(opacity:80);
background: #fff;
color: #000;
top: 228px;
}
a:hover {/*设置鼠标移动到链接上的样式*/
background: #FFFF00;
color: red;
}
#next {/*后一张图片按钮的样式*/
position: absolute;
right: 10px;
}
#prev {/*前一张图片按钮的样式*/
position: absolute;
left: 10px;
}
#p1 {/*顶部页码显示的样式*/
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
}
.txt_style {/*文字的样式*/
text-align: center;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 15px;
background: #000;
color: #fff;
opacity: 0.7;
filter: alpha(opacity:70);
}
#span1 {/*底部文字描述的样式*/
position: absolute;
left: 0px;
bottom: 0px;
}
#img1 {/*图片的大小*/
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
window.onload = function() {
//图片路径
var arr = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg'];
//和图片路径匹配的文字描述
var txt = ['抱熊~抱抱熊', '一起坐坐吧~', '啦~~啦~坐滑梯', '想喝水~', '嗯,喝饱了~~'];
var obt1 = document.getElementById("prev");//前一张图片的按钮
var obt2 = document.getElementById("next");//后一张图片的按钮
var oImg = document.getElementById("img1");//显示图片的标签
var oP = document.getElementById("p1");//显示张数的文字标签
var oSpan = document.getElementById("span1");//显示图片信息的标签
var index = 0;//定位第几张图片的变量
function funTab() {
oImg.src = arr[index];//给图片标签添加图片
oP.innerHTML = (index + 1) + "/" + arr.length;//修改上方的文字信息
oSpan.innerHTML = txt[index];//显示与之匹配的文字信息描述
}
funTab(); //第一次运行时 调用一次,进行初始化
obt1.onclick = prevImg;//当点击前一张按钮时,调用方法 显示前一张图片
obt2.onclick = nextImg;//当点击后一张按钮是,调用方法显示后一张图片
function nextImg() {
index++;//后一张,所以下标要增加1
if(index > arr.length - 1) {//如果移到到数组的最大下标
index = 0;//那么下标为0 . 这样就可以循环显示图片
}
funTab();//显示图片和搭配的文字信息
};
function prevImg() {
index--;//前一张图片.所以下标要减1
if(index < 0) {//如果下标小于 0
index = arr.length - 1;//那么下标修改为最大下标 这样就可以循环显示图片
}
funTab();//显示图片和文字信息
}
//给文档绑定一个按键事件, 来响应键盘的按键
document.onkeydown = function(event) {
//兼容主流浏览器的写法 获取按键事件
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode == 37) { // 按 左方向键 (37 是←方向键码值)
prevImg();//这里是方法调用 ,方法名后要加括号, 立刻调用方法
}
if(e && e.keyCode == 39) { // 按 右方向键(39 是→方向键码值)
nextImg();//这里是方法调用 ,方法名后要加括号, 立刻调用方法
}
};
}
</script>
</head>
<body>
<div id="box">
<p id="p1" class="txt_style">图片数据加载中...</p>
<a id="next" href="javascript:;">></a>
<a id="prev" href="javascript:;"><</a>
<span id="span1" class="txt_style">图片数量计算中...</span>
<img id="img1" />
</div>
</body>
</html>
document.getElementById("btn").onclick = function(){
document.getElementById("img").src ="c:/img/aa.jpg"
};
