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添加点击事件，循环lifor(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，刚一打开页面默认是第一个lioldLi = lis[num];// 初始化，要先插入标签再初始化，顺序不要颠倒，否则会出错imgs.src = arrUrl[num];//显示第一张图片spans.innerHTML = num+1+'/'+arrUrl.length;//显示上面总张数（自动获取总数）txt.innerHTML = arrTxt[num]; lis[num].className = 'active';//给当前的li添加类名// 给li添加点击事件，循环lifor(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扔给旧的lithis.className = 'active';//⑤当前点击的li添加类名}; }
