点击某个按钮切换图片（按钮颜色跟着改变）

html：

<div id="pic">
<img src="img/1.jpg" alt="">
<span>数量正在加载...</span>
<p>文字正在加载...</p>
<ul></ul>
</div>

css：

body {background-color: #333;}
ul {padding: 0;margin: 0;}
li {list-style: none}
#pic {
width: 120px;
height: 200px;
position: relative;
margin: 0 auto;
}
#pic img {
width: 120px;
height: 200px;
}
#pic ul {
position: absolute;
top: 0;
right: -50px;
}
#pic ul li {
width: 40px;
height: 40px;
margin-bottom: 4px;
background-color: #666;
}
p,span {
width: 120px;
height: 20px;
line-height: 20px;
text-align: center;
color: #fff;
position: absolute;
left: 0;
}
p { bottom: 0;margin: 0;}
span { top: 0;}
#pic .active { background-color: #fc3;}

js：

window.onload = function(){
// ①找元素
var pic = document.getElementById('pic');
var imgs = pic.getElementsByTagName('img')[0];
var lis = pic.getElementsByTagName('li')[0];
var txt = pic.getElementsByTagName('p')[0];
var spans= pic.getElementsByTagName('span')[0];
var uls = pic.getElementsByTagName('ul')[0];
var lis = uls.getElementsByTagName('li');//找到页面中的li元素,li元素是往里面塞进去的

// ②准备数据
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrTxt = ['海上帆船','小台灯','椰子树','照相机'];
var num = 0;//有数组的地方一般都有数字，因为图片地址配合数字就能找到文字描述

// ③插入标签
for(var i=0;i<arrUrl.length;i++){
uls.innerHTML += '<li></li>';//往Ul里添加li就要写成+=，如果是改写就直接写成等号
}

// ④初始化，要先插入标签再初始化，顺序不要颠倒，否则会出错
imgs.src = arrUrl[num];//显示第一张图片
spans.innerHTML = num+1+'/'+arrUrl.length;//显示上面总张数（自动获取总数）
txt.innerHTML = arrTxt[num];
lis[num].className = 'active';//给当前的li添加类名

// ⑤给li添加点击事件，循环li
for(var i=0;i<lis.length;i++){
lis[i].index = i;//自定义属性又叫索引值
lis[i].onclick = function(){
// 点击任何一个li都要去匹配数组中的图片路径，这种对应关系要用自定义属性
//alert(this.index);//弹出所点击的li的数字，从0开始
// 我们要把点击的数字和数组中图片路径相匹配出来
imgs.src = arrUrl[this.index];//图片路径匹配所点击的li元素
txt.innerHTML = arrTxt[this.index];//文字描述匹配所点击的li元素
spans.innerHTML = this.index+1+'/'+arrUrl.length;

// 按钮的颜色随着鼠标点击来移动
// 思路一：全部清空，当前添加（全部清除，如果按钮多的话，这个方法不太好）
for(var i=0;i<lis.length;i++){
lis[i].className = '';//遍历清空所有按钮上的类名
}
this.className = 'active';//只给当前点击的按钮添加类名
};
}
}

注意：

步骤：①先布局把html写好；②把样式写好；③写JS;

写js分为：①获取所有元素；②准备数据；③插入元素；④初始化页面；⑤添加事件；

按钮的颜色随着鼠标点击跟着变化方法有两个：

思路一：全部清空，当前添加（这个方法适合按钮比较少的时候使用，扩展性较好）

for(var i=0;i<lis.length;i++){
lis[i].className = '';//遍历清空所有按钮上的类名
}
this.className = 'active';//只给当前点击的按钮添加类名

思路二：清空上一个，当前添加（此方法适合按钮比较多的情况）

这个方法是定点清除，如果按钮比较多，用这种方法比较好

// 上一个.className = ”;

// 当前的添加类名 this.className = ‘active’;

①在准备数据中，让旧的li为空

②在插入标签时，记住第0个标签

③最后，把旧的li清空

④把当前点击的li扔给旧的li

⑤当前点击的li添加类名

思路二完整代码：

// 找元素
var pic = document.getElementById('pic');
var imgs = pic.getElementsByTagName('img')[0];
var lis = pic.getElementsByTagName('li')[0];
var txt = pic.getElementsByTagName('p')[0];
var spans= pic.getElementsByTagName('span')[0];
var uls = pic.getElementsByTagName('ul')[0];
var lis = uls.getElementsByTagName('li');//找到页面中的li元素,li元素是往里面塞进去的

// 准备数据
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrTxt = ['海上帆船','小台灯','椰子树','照相机'];
var num = 0;//有数组的地方一般都有数字，因为图片地址配合数字就能找到文字描述
var oldLi = null;//①旧的li为空

// 插入标签
for(var i=0;i<arrUrl.length;i++){
uls.innerHTML += '<li></li>';//往Ul里添加li就要写成+=，如果是改写就直接写成等号
}
// ②添加标签后就会出现li,旧的li就是第0个，num刚开始是0，刚一打开页面默认是第一个li
oldLi = lis[num];

// 初始化，要先插入标签再初始化，顺序不要颠倒，否则会出错
imgs.src = arrUrl[num];//显示第一张图片
spans.innerHTML = num+1+'/'+arrUrl.length;//显示上面总张数（自动获取总数）
txt.innerHTML = arrTxt[num];
lis[num].className = 'active';//给当前的li添加类名

// 给li添加点击事件，循环li
for(var i=0;i<lis.length;i++){
lis[i].index = i;//自定义属性又叫索引值
lis[i].onclick = function(){
// 点击任何一个li都要去匹配数组中的图片路径，这种对应关系要用自定义属性
//alert(this.index);//弹出所点击的li的数字，从0开始
// 我们要把点击的数字和数组中图片路径相匹配出来
imgs.src = arrUrl[this.index];//图片路径匹配所点击的li元素
txt.innerHTML = arrTxt[this.index];//文字描述匹配所点击的li元素
spans.innerHTML = this.index+1+'/'+arrUrl.length;

// 按钮的颜色随着鼠标点击来移动
// 思路二：清空上一个，当前添加（定点清除，如果按钮多用这个种方法比较好）
// 上一个.className = '';
// 当前的添加类名 this.className = 'active';
oldLi.className = '';//③把旧的li清空
oldLi = this;//④把当前点击的li扔给旧的li
this.className = 'active';//⑤当前点击的li添加类名
};
}