轮播图
<!DOCTYPE html> <html lang="ch-zn"> <head> <meta charset="UTF-8"> <link rel="" href=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>moban</title> <style> body,h1,h2,h3,h4,h5,h6,ul,ol,p,div{margin:0;font-weight:normal} ul,ol{padding:0;list-style:none;} a{text-decoration: none;} #banner{ 820px; height: 380px; margin: 50px auto; overflow: hidden; } #banner ul.pg{ 1000%; height: 340px; transition: all .3s; } #banner ul.pg li{ 820px; height: 340px; float: left; } #banner ul.pg li a{ display: block; 100%; height: 100%; } #banner ul.pg li a img{ display: block; 820px; height: 340px; } #banner ul.tab{ 100%; height: 40px; display: flex } #banner ul.tab li{ flex-direction:row-reverse; 164px; height: 38px; background-color: rgb(227,226,226); border-bottom: 2px solid rgb(227,226,226); /* #cea861 */ font-size: 14px; color: black; line-height: 40px; text-align: center; /* 手指状态 */ cursor: pointer; /* 禁止选中 */ user-select: none; } #banner ul.tab li.activ{ background-color: rgb(247,246,246); border-bottom: 2px solid #cea861; color: #cea861; } </style> </head> <body> <div id="banner"> <ul class="pg"> <li><a href="https://www.baidu.com/"><img src="./img/1.jpg" alt=""></a></li> <li><a href=""><img src="./img/2.jpg" alt=""></a></li> <li><a href=""><img src="./img/3.jpg" alt=""></a></li> <li><a href=""><img src="./img/4.png" alt=""></a></li> <li><a href=""><img src="./img/5.jpg" alt=""></a></li> </ul> <ul class="tab"> <li class="activ">绽灵花开之礼</li> <li>灵魂莲华 续章</li> <li>灵魂莲华2020通行证</li> <li>8月9日LPL赛程</li> <li>每周限时优惠</li> </ul> </div> <script> (function(){ //获取tab下所有li的标签权限 let aTab = document.querySelectorAll("#banner ul.tab li"), //获取盒子的权限 Banner = document.getElementById("banner"), //定义aTab下数组长度 len = aTab.length, //获取banner下的pg的标签权限 oPg = document.querySelector("#banner ul.pg"), //用来表示当前显示的序号 currentIndex=0, //设置一个定时器的初始值 timer ; //设置一个点击事件的函数 aTab.forEach(function(itme,index){ itme.onclick = function(){ currentIndex = index; changeDOM() } }) //设置循环定时器 function act(){ timer = setInterval(function(){ currentIndex ++ ; currentIndex %= len; changeDOM(); },1000) }; //初始有定时器自动执行 act(); //清除定时器(鼠标移入) Banner.onmouseenter = function(){ clearInterval(timer); }; //添加定时器(鼠标移出) Banner.onmouseleave = function(){ act(); }; //封装函数 function changeDOM(){ //去掉li所有的标签名字 aTab.forEach(function(itne){ itne.classList.remove("activ") }); //给li加所有的名字 aTab[currentIndex].classList.add("activ"); //改ul的marginLeft oPg.style.marginLeft = -currentIndex*820 + "px"; }; })(); </script> </body> <!-- 笔记区域 --> </html>
