<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{font-family: "Microsoft YaHei",serif;} body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;} ol,ul,li{margin: 0;padding: 0;list-style: none;} img{border: none} #wrap{ position: relative; margin: 50px auto; width: 820px; height: 390px; user-select: none; } #img{ position: relative; width: 100%; height: 340px; } #img ul{ width: 100%; height: 100%; } #img li{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #img li.show{ display: block; } #tab{ overflow: hidden; width: 100%; height: 50px; } #tab ul{ width: 200%; height: 100%; } #tab li{ float: left; width: 10%; height: 50px; line-height: 50px; text-align: center; background-color: #000; font-size: 12px; color: #eeeeee; cursor: pointer; } #tab li.active{ background-color: #303030; color: #e9c06c; } #arrow div{ position: absolute; top: 50%; width: 40px; height: 60px; margin-top: -30px; line-height: 60px; text-align: center; font-size: 12px; background-color: #000; color: #fff; cursor: pointer; } #arrow div.left{ left: 0; } #arrow div.right{ right: 0; } </style> </head> <body> <div id="wrap"> <div id="img"> <ul> <li class="show"><a href=""><img src="../14作业案例/img/1.jpg" alt=""></a></li> <li><a href=""><img src="../14作业案例/img/2.jpg" alt=""></a></li> <li><a href=""><img src="../14作业案例/img/3.jpg" alt=""></a></li> <li><a href=""><img src="../14作业案例/img/4.jpg" alt=""></a></li> <li><a href=""><img src="../14作业案例/img/5.jpg" alt=""></a></li> </ul> </div> <div id="tab"> <ul> <li class="active">qwer</li> <li>qwer</li> <li>qwer</li> <li>qwer</li> <li>qwer</li> </ul> </div> <div id="arrow"> <div class="left"> < </div> <div class="right"> > </div> </div> </div> <script> let aTabLi = document.querySelectorAll('#tab ul li'), aImgLi = document.querySelectorAll('#img ul li'), aArrow = document.querySelectorAll('#arrow div'), len = aTabLi.length; let goudan = 0;//定义变量,用来表示当前显示的是哪张图片 function change(x) { aTabLi[goudan].className = ""; aImgLi[goudan].className = ""; goudan = x; // 当前点击的tab样式添加 aTabLi[goudan].className = "active"; aImgLi[goudan].className = "show"; } // 给Tab对应的li添加点击事件 for (let i=0;i<len;i++){ aTabLi[i].onclick = function () { if (goudan===i)return; change(i); }; } // 左箭头的点击事件 aArrow[0].onclick = function(){ let x = goudan; x --; if (x<0){x=len-1} change(x) }; // 右箭头的点击事件 aArrow[1].onclick = function () { let x = goudan; x++; if (x>=len){ x=0 } change(x) } </script> </body> </html>
14-1带左右按钮的选项卡
猜你喜欢
转载自www.cnblogs.com/zhangyu666/p/11479734.html
今日推荐
周排行