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

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，刚一打开页面默认是第一个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扔给旧的lithis.className = 'active';//⑤当前点击的li添加类名};
}

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

JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
Android 点击按钮切换图片
Android 点击按钮切换图片效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
JS实现点击button按钮切换图片
JS实现点击button按钮切换图片放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础.实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做 ...
vue两个按钮切换_vue实现按钮切换图片
本文实例为大家分享了vue实现按钮切换图片的具体代码,供大家参考,具体内容如下 Tab选项卡实现步骤 1.实现静态UI效果用传统的方式实现标签结构和样式 2.基于数据重构UI效果将静态的结构和样 ...
2.Button按钮实例：普通按钮和图片按钮
目标效果: 在这个程序中,将实现两个按钮:普通按钮和图片按钮,当用户点击不同的按钮时,在其下方的文本框中显示点击的次数. 布局实现: <LinearLayout xmlns:a ...
html点击按钮切换图片代码_SVG创意推文—『点击开窗』教程
嘿,胖友们大家好呀,我是三儿. 好久不见,胖友们有没有想我呀!最近这段时间,各大官媒齐齐出手,朝着SVG创意推文进军.之前人民日报推了一篇<点亮武汉>在当时引起了不小的轰动,三儿也连忙出了 ...
用易语言制作一款图文展示软件，点击按钮切换图片和文字说明，易语言按钮、图片框、编辑框的应用
在如今这个商业社会,产品宣传至关重要,尤其是向目标客户发送产品相册,非常有利于促进更多商品的交易.用易语言制作一款图文同时展示的小软件,通过网络发送给客户,客户很方便了解产品详情,从而提升客户体验.此 ...

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

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

最新文章

热门文章