经典轮播图
<!DOCTYPE html><html lang="zh-CN"> <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" /> <title>经典轮播图</title> <style> /* 轮播图 */ .slider {max-width: 750px;min-width: 320px;margin: auto;padding: 0 10px;} .slider .imgs {max-height: 235px; } .slider .imgs img {height: 100%;width: 100%;border-radius: 10px;display: none;} .slider .imgs img.active {display: block; } /* 轮播图按钮组 */ .slider .btns { display: flex; place-content: center;} .slider .btns span { width: 10px;height: 10px;background-color: #333;border-radius: 50%;margin: -16px 5px 5px;} .slider .btns span.active {background-color: #fff;} </style> </head> <body> <div class="slider"> <!-- 图片容器 --> <div class="imgs"></div> <!-- 切换按钮数量与图片数量必须一致 --> <div class="btns"></div> </div> <script> let imgGroup = ["./images/banner-1.jpg","./images/banner-2.jpg", "./images/banner-3.jpg","./images/banner-4.jpg"]; let imgs_div= document.querySelector('.imgs'); //获取到.imgs容器的div的class let btn_div = document.querySelector('.btns')//获取到.ibtns容器的div的class for (let i = 0; i < imgGroup.length; i++) { let img_src = imgGroup[i]; lmg_src =`<a href=""><img src="${img_src}" alt=" " data-index ="${i+1}" /></a>`; lmg_src = imgs_div.insertAdjacentHTML('beforeend',lmg_src); let btn_one = ` <span data-index="${i+1}" onclick="setActive()"></span>`; btn_div.insertAdjacentHTML('beforeend',btn_one); } function display () { document.imgs_div.append(imgs_div); document.btn_div.append(btn_div); } window.addEventListener('load', display,false); // 1. 所有图片和按钮 const imgs = document.querySelectorAll('.slider .imgs img'); const btns = document.querySelectorAll('.slider .btns span'); // 2. 设置激活状态 function setActive() { // 1. 清空图片和按钮的状态 imgs.forEach(img => img.classList.remove('active')); btns.forEach(btn => btn.classList.remove('active')); // Objedt.keys(obj): 返回键名组成的数组 // console.log(Object.keys(btns)); // 2.根据按钮的自定义data-index的值,来确定应该显示哪一张图片 // 激活当前按钮 event.target.classList.add('active'); imgs.forEach(img => { if (img.dataset.index === event.target.dataset.index) { img.classList.add('active'); } }); } // 3. 定时播放 setInterval( function (arr) { // 从头部取一个 let index = arr.shift(); // console.log(arr); // 将一个自定义的点击事件,分配给与当前索引对应的按钮上就可以了 btns[index].dispatchEvent(new Event('click')); // 把头部取出来的,再尾部再追加上去 arr.push(index); }, 2000, Object.keys(btns) ); </script> </body></html>
效果图
仿php中文中词典轮播图效果
<!DOCTYPE html><!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"> <title>Document</title></head><style> *{box-sizing: border-box; margin: 0; padding: 0;} li{list-style: none;} a{text-decoration: none; color: #000;} .box{width: 980px; margin: 0 auto; } .box .menu{ display: flex;place-content: space-around; height: 39px; place-items: center;} .box .menu li{ width: 30%;text-align: center;border-radius:10px; border: 1px solid #000; font-size: larger; font-weight: bolder;} .box .menu .active{background-color: #f11717; color: #fff;border-radius:10px; border: 1px solid #f11717; } .box .list{ width: 100%; display: none; } .box .list.active { display: block;} /* .search */ .box .list .search_list{ width: 800px;margin: 0 auto;display: flex;flex-flow: column;place-content: center;place-items: center;} .box .list .search_list .title{ font-size: 20px; margin-top: 35px; font-weight: bolder;} .box .list .search_list p{ font-size: smaller; margin-top: 14px;} .box .list .search_list .searchcx{display: flex;width: 100%;height: 60px;place-content: center;} .box .list .search_list .searchcx b{width: 18px;height: 18px;background: url(https://www.php.cn/static/images/new/bg1.png) no-repeat -140px -65px;background: image-set(url(https://www.php.cn/static/images/new/bg1.png) 1x, url(/static/images/new/bg1-2x.png) 2x) no-repeat -140px -65px;background: -webkit-image-set(url(https://www.php.cn/static/images/new/bg1.png) 1x, url(/static/images/new/bg1-2x.png) 2x) no-repeat -140px -65px;margin: 22px 0px 0px 20px;} .box .list .search_list .searchcx input[type='search']{width: 600px;border: none;background:none;outline: none;margin-left: 10px;color: #999;} .box .list .search_list .searchcx button{width: 90px;border: none;background: #f11717;outline: none;margin-left: 10px;border-radius: 0 6px 6px 0;font-size: 14px;color: #fff;cursor: pointer;} /* 热门搜索 */ .box .list .search_list .hot_search{margin-top: 30px;height: 32px;display: flex;place-content: start;width: 100%;align-items: center;} .box .list .search_list .hot_search span{padding: 0px 20px;} .box .list .search_list .hot_search a{border: 1px solid #e6e6e6;padding: 0px 20px;border-radius: 100px;font-size: small;} .box .list .search_list .hot_search a:hover{ border: 1px solid red;}/* 最新更新 */ .box .list .kc_list{display: grid;grid-template-columns: repeat(5, 1fr);gap: 10px 15px;} .box .kc_list a{display: grid;width: 160px;grid-template-columns: repeat(2, 1fr);place-items: center;gap: 5px 5px;padding-top: 12px;} .box .kc_list span{grid-area: 1 /span 2;font-weight: bold;place-self: start;} .box .kc_list img{width: 38px;height: 38px;border-radius: 100px;place-items: end;} .box .kc_list p{width: 110px;place-items: start;font-size: smaller;} .box .list .update{width: 100%;height: 100%;} .box .list .update{margin-top: 16px;width: 100%;display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px 15px;place-items: center;} .box .update a{width: 200px;place-self: center;padding: 12px;background: #f7f8fa;border-radius: 100px;color: #333333;font-size: small;margin: 0 auto;text-align: center;} .box .update a:hover{background: #f11717;color: #ffffff}</style><body> <div class="box"> <!-- 三个按钮 --> <ul class="menu"> <li class="active" data-index="1">词典查询</li> <li data-index="2">全部词典</li> <li data-index="3">最近跟新</li> </ul> <!-- 三个列表 --> <div class="list active" data-index="1"> <div class="search_list"> <div class="title">编程词典</div> <p>服务码农的在线技术手册</p> <div class="searchcx"> <b></b> <input type="search" name="" id="" value="请输入查询内容"> <button>搜索</button> </div> <div class="hot_search"> <span>热门搜索</span> <a href="">PHP</a> <a href="">MYSQL</a> <a href="">JQUERY</a> <a href="">HTML</a> <a href="">CSS</a> </div> </div> </div> <div class="list" data-index="2"> <div class="kc_list"> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> <a href=""> <span>【学习 PHP】</span> <img src="./img/php.png" alt=""> <p>HP一种被广泛应用的开发...</p> </a> </div> </div> <div class="list" data-index="3"> <div class="update"> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> <a href=""> php array_diff_assoc()函数 </a> </div> </div> </div></body><script> // 事件冒泡 const menu = document.querySelector('.menu'); menu.addEventListener('click', show, false); menu.addEventListener('click', show, false); // show() function show() { // 禁用<a>的默认跳转行为 event.preventDefault(); const btns = [...event.currentTarget.children]; const lists = document.querySelectorAll('.list'); // 1. 将原来的标签高亮样式去掉,并把当前正在被点击的标签设置为高亮 btns.forEach(item => item.classList.remove('active')); event.target.classList.add('active'); // 2. 内容切换与标签切换原理一样,只不过多一个查询过程 data-index lists.forEach(item => item.classList.remove('active')); lists.forEach(list => { if (list.dataset.index === event.target.dataset.index) { list.classList.add('active'); } }); }</script></html>
效果图
数组api
<!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"> <title>数组api</title></head><body> <script> //concat()数组合并const array1 = ['a', 'b', 'c'];const array2 = ['d', 'e', 'f'];const array3 = array1.concat(array2);console.log("数组合并");console.log(array3);console.log("+++++++++++++++++++++");console.log("+++++++++++++++++++++");// 判断一个数组是否包含一个指定的值const pets = ['cat', 'dog', 'bat'];console.log("判断一个数组是否包含一个指定的值");console.log(pets.includes('cat'));console.log("+++++++++++++++++++++");console.log("+++++++++++++++++++++");// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引const array4 = [5, 12, 8, 130, 44];const isLargeNumber = (element) => element > 13;console.log("返回数组中满足提供的测试函数的第一个元素的索引");console.log(array4.findIndex(isLargeNumber));console.log("+++++++++++++++++++++");console.log("+++++++++++++++++++++");// flatMap()将结果压缩成一个新数组const arr1 = [1, 2, [3], [4, 5], 6, []];console.log("将结果压缩成一个新数组");console.log("原数组"+ arr1);const flattened = arr1.flatMap(num => num);console.log(flattened);console.log("+++++++++++++++++++++");console.log("+++++++++++++++++++++");//toString() 返回一个字符串 const arr= [1, 2, 'a', '1a'];console.log("返回一个字符串 ");console.log(array1.toString()); </script></body></html>
效果图
