效果如下：

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>div {width: 400px;}div img {width: 100%;display: none;}.current {display: block;}.tab {padding: 0;list-style: none;}.tab li {width: 100px;float: left;}.tab li img {width: 100%;}</style><title>Document</title>
</head><body><div><img src="data:images/1.jpg" alt="" class="current"><img src="data:images/2.jpg" alt=""><img src="data:images/3.jpg" alt=""><img src="data:images/4.jpg" alt=""></div><ul class="tab"><li><img src="data:images/1.jpg" alt=""></li><li> <img src="data:images/2.jpg" alt=""></li><li> <img src="data:images/3.jpg" alt=""></li><li> <img src="data:images/4.jpg" alt=""></li></ul><script>// 获取所有 li 和 大图片let lis = document.getElementsByTagName('li');let div = document.querySelector('div');let imgs = div.querySelectorAll('img');// 绑定点击事件for (let i = 0; i < lis.length; i++) {lis[i].setAttribute('data-index', i);lis[i].addEventListener('click', function () {for (let i = 0; i < lis.length; i++) {imgs[i].className = '';}let index = this.getAttribute('data-index');imgs[index].className = 'current';})}</script>
</body></html>

原生JavaScript 06-相册选择功能相关推荐

JavaScript案例——06相册选择功能
用在商城网站居多(⭐) 1.1 css实现效果图 <!DOCTYPE html> <html lang="en"> <head><meta ...
原生js手机相册制作原创
饭后茶余.写着玩的,适用于初学者做参考的 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
java文件异步上传_[Java教程]原生javascript实现文件异步上传
[Java教程]原生javascript实现文件异步上传 0 2017-10-25 19:00:06 效果图: 代码:(demo33.jsp) demo33.jsp名称文件确定本文网址:http:/ ...
为什么说要学习全新的原生 JavaScript？
JavaScript 是前端开发工程师最重要的技能,没有之一.在 Vue.js.React.js.Koa.Echarts 等框架风靡一时的背景下,原生的 JavaScript 就可以被抛弃了吗?答案是 ...
h5调用安卓原生相机、相册、电话、录像，且兼容安卓系统8.0
前言安卓原生组件webview加载h5的URL,若要h5调用安卓原生相机和相册有效需要做以下操作. 测试机:魅蓝note2 系统5.1.1 华为荣耀畅玩7x 系统8.0.0 一.h5页面相关方 ...
分享10个原生JavaScript技巧
首先在这里要非常感谢无私分享作品的网友们,这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的.把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,利 ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
[译] 原生 JavaScript 值得学习吗？答案是肯定的
原文地址:Is Vanilla JavaScript worth learning? Absolutely. 原文作者:David Kopal 译文出自:掘金翻译计划本文永久链接:github.co ...

原生JavaScript 06-相册选择功能

效果如下：

完整代码：

原生JavaScript 06-相册选择功能相关推荐

最新文章

热门文章