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

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添加类名
    };              
}