简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿京东轮播图 php中文网编程词典选项卡 数组api

仿京东轮播图 php中文网编程词典选项卡 数组api

喜
喜原创
2022年07月30日 17:50:24501浏览

1. 仿京东轮播图

查看地址：http://m.qpic.cn/psc?/V521qPfX3KXqTE186bXV20iIm90jfTgK/ruAMsa53pVQWN7FLK88i5tP1snw8lKJOBrWoSg2zZKoqAgbBfWwDrEzbpUAWbA3I7hkNI.hiUemmCyEqEV6QvBtRmrQu6dKYX5U6T4lTp*8!/b&bo=lwQ4BAAAAAACB4w!&rf=viewer_4

1.1代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    <link rel="stylesheet" href="../轮播图/download/font_3459154_rs8v47xcmr/iconfont.css">
  8.    <title>Document</title>
  9. </head>
  10. <style>
  11.    *{
  12.       margin: 0;
  13.       padding: 0;
  14.       box-sizing: border-box;
  15.    }
  16.    img{
  17.       position: absolute;
  18.       top: 0;
  19.       left: 0;
  20.       width: 100%;
  21.       opacity: 0;
  22.       transition: all 0.5s;
  23.    }
  24.    .img{
  25.       margin: 100px auto;
  26.       position: relative;
  27.       width: 600px;
  28.       height: 470px;
  29.    }
  30.    .tp,.dw,.yuand{
  31.       cursor: pointer;
  32.    }
  33.    .dw{
  34.       width: 100%;
  35.       position: absolute;
  36.       display: flex;
  37.       justify-content: space-between;
  38.       top: 50%;
  39.       transform: translateY(-50%)
  40.    }
  41.    .dw>span{
  42.       font-size: 13px;
  43.       color: rgba(255,255,255,.8);
  44.     width: 25px;
  45.     height: 35px;
  46.     line-height: 35px;
  47.     background-color: #d9d9d9;
  48.     background-color: rgba(0,0,0,.15);
  49.    }
  50.    .dw span:hover{
  51.       background-color: rgba(0,0,0,.4);
  52.    }
  53.    .dw span:first-of-type{
  54.       padding-left: 5px;
  55.       border-top-right-radius: 18px;
  56.     border-bottom-right-radius: 18px;
  57.    }
  58.    .dw span:last-of-type{
  59.       padding-left: 8px;
  60.       border-top-left-radius: 18px;
  61.     border-bottom-left-radius: 18px;
  62.    }
  63.    .yuand{
  64.       display: flex;
  65.       position: absolute;
  66.       left: 30px;
  67.     bottom: 20px;
  68.    }
  69.    .yuand span{
  70.       margin-right: 5px;
  71.       border-radius: 50%;
  72.       width: 8px;
  73.       height: 8px;
  74.       border: 1px solid rgba(0,0,0,.05);
  75.     background: rgba(255,255,255,.4);
  76.    }
  77.    .yuand .active{
  78.     background-color: white;
  79.    }
  80.   img.active{
  81.       opacity: 1;
  82.    }
  83. </style>
  84. <body>
  85.  <div class="img">
  86.    <div class="tp"></div>
  87.   <div class="dw">
  88.    <span class="iconfont icon-zuo"></span>
  89.    <span class="iconfont icon-you"></span>
  90.   </div>
  91.    <div class="yuand">
  92.    </div>
  93.  </div>
  94. </body>
  95. <script>
  96.    let arr=[
  97.       {src:'../轮播图/1.jpg'},
  98.       {src:'../轮播图/2.jpg'},
  99.       {src:'../轮播图/3.jpg'},
  100.       {src:'../轮播图/4.jpg'},
  101.       {src:'../轮播图/5.jpg'},
  102.       {src:'../轮播图/6.jpg'},
  103.       {src:'../轮播图/7.jpg'},
  104.       {src:'../轮播图/8.jpg'},
  105.    ]
  106.    for(let i=0;i<arr.length;i++){
  107.       let img=document.createElement('img')
  108.       img.src=arr[i].src
  109.    document.querySelector('.tp').append(img)
  110.       let span=document.createElement('span')
  111.       span.setAttribute('data-t',i+1)
  112.       document.querySelector('.yuand').append(span)
  113.    }
  114.    document.querySelector('img').classList.add('active')
  115.    document.querySelector('.yuand span').classList.add('active')
  117.    let img=document.querySelectorAll('img')
  118.    let span=document.querySelectorAll('.yuand span')
  119.    let you=document.querySelector('.icon-you')
  120.    let zuo=document.querySelector('.icon-zuo')
  123.    let i=0
  124. function gg(){     
  125.    img.forEach( i=>i.classList.remove('active'))
  126.    span.forEach(i=>i.classList.remove('active'))
  128.    span[i].classList.add('active')
  129. img[i].classList.add('active')
  130. }
  131. you.addEventListener('click',()=>{
  132.    i++
  133.    i>arr.length-1?i=0:i
  134.    gg()
  135. })
  136. zuo.addEventListener('click',()=>{
  137.    i--
  138.    i<0?i=arr.length-1:i
  139.    gg()
  140. })
  142. let t=setInterval(()=>you.click(),2000)
  143. let zon=document.querySelector('.img')
  144. zon.addEventListener('mouseenter',()=>clearInterval(t))
  145. zon.addEventListener('mouseleave',()=>{t=setInterval(()=>you.click(),2000)})
  147. span.forEach(it=>{
  148.   it.addEventListener('mouseenter',function(){
  149.     span.forEach(item=>item.classList.remove('active'))
  150.      this.classList.add('active')
  151.    i=this.dataset.t-1
  152.    img.forEach( i=>i.classList.remove('active'))
  153. img[i].classList.add('active')
  154.   })
  155. })
  156. </script>
  157. </html>

2.php中文网编程词典选项卡

2.1代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     a{
  16.         text-decoration: none;
  17.         color: #333;
  18.     }
  19.     li{
  20.         list-style: none;
  21.     }
  22.     .box{
  23.         width: 980px;
  24.         margin: 50px auto;
  25.     }
  26.     .box .top{
  27.         display: grid;
  28.         grid-template-columns: repeat(3,144px);
  29.         height: 39px;
  30.     border-bottom: 1px solid #f6f6f6;
  31.     margin-top: 20px;
  32.     }
  33.     .box .top a{
  34.         margin: 0 40px;
  35.         font-weight: bold;
  36.     }
  37.     .box .top b{
  38.         width: 18px;
  39.     height: 3px;
  40.     background: #fff;
  41.     display: block;
  42.     margin: auto;
  43.     margin-top: 15px;
  44.     }
  45.     .box .top .active a{
  46.         color: #f11717;
  47.     }
  48.     .box .top .active b{
  49.         background-color: #f11717;
  50.     }
  51.     .box .bottom{
  52.         margin: 35px 90px;
  53.         display: grid;
  54.         grid-template-rows: 24px 18px 60px 32px;
  55.         gap: 20px ;
  56.     }
  57.     .box .bottom h3,p:first-of-type{
  58.         text-align: center;
  59.     }
  60.     .box .bottom p:first-of-type{
  61.         font-size: 14px;
  62.         color: #666;
  63.     }
  64.     .box .bottom input{
  65.         padding-left: 50px;
  66.         width: 100%;
  67.         height: 100%;
  68.         outline: none;
  69.         border: none;
  70.         background-image: linear-gradient(to right, gold, pink);
  71.         border-radius: 6px;
  72.     }
  73.     .box .bottom .search{
  74.         position: relative;
  75.     }
  76.     .box .bottom .search button{
  77.         position: absolute;
  78.         right: 0;
  79.         bottom: 0;
  80.         width: 90px;
  81.     height: 60px;
  82.     border: none;
  83.     background: #f11717;
  84.     float: right;
  85.     border-radius: 0px 6px 6px 0px;
  86.     font-size: 16px;
  87.     color: #ffffff;
  88.     font-weight: bold;
  89.     outline: none;
  90.     cursor: pointer;
  91.     }
  92.     .box .bottom .search span{
  93.         position: absolute;
  94.         bottom: 50%;
  95.         transform: translateY(50%);
  96.         left: 0;
  97.         display: block;
  98.     width: 18px;
  99.     height: 18px;
  100.     line-height: 60px;
  101.     background: url(https://www.php.cn//static/images/new/bg1.png) no-repeat -140px -65px;
  102.     background: image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -140px -65px;
  103.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -140px -65px;
  104.     margin: 22px 0px 0px 20px;
  105.     }
  106.     .box .bottom p span{
  107.         float: left;
  108.         font-size: 14px;
  109.         color: #000;
  110.         display: block;
  111.         margin-right: 20px;
  112.     line-height: 32px;
  113.     }
  114.     .box .bottom p a{
  115.         display: block;
  116.     float: left;
  117.     height: 28px;
  118.     border: 1px solid #e6e6e6;
  119.     padding: 0px 20px;
  120.     border-radius: 100px;
  121.     text-align: center;
  122.     line-height: 28px;
  123.     color: #999999;
  124.     margin-right: 20px;
  125.     }
  126.     .box .bottom p a:hover{
  127.         border: 1px solid #f11717;
  128.         color: #f11717;
  129.     }
  130.     ul.xxk{
  131.         padding: 27px 40px;
  132.         display: grid;
  133.         grid-template-columns: repeat(4,200px);
  134.         grid-template-rows: repeat(2,95px);
  135.         gap: 34px;
  136.     }
  137.     ul.xxk a{
  138.         width: 100%;
  139.         height: 100%;
  140.         background: #f7f8fa;
  141.  padding: 12px 14px;
  142.         border-radius: 3px;
  143.         display: grid;
  144.         grid-template-rows: 18px 1fr;
  145.     }
  146.     ul.xxk a img{
  147.         width: 38px;
  148.     height: 38px;
  149.     border-radius: 100px;
  150.     margin-top: 3px;
  151.     }
  152.     ul.xxk a h3{
  153.         font-size: 14px;
  154.     }
  155.     ul.xxk a .tp{
  156.         display: flex;
  157.         font-size: 12px;
  158.         color: #999;
  159.         align-items: center;
  160.     }
  161.     .lm{
  162.         width: 900px;
  163.     margin: auto;
  164.     height: 215px;
  165.     margin-top: 15px;
  166.     }
  167.     .lm a{
  168.         font-size: 14px;
  169.         display: block;
  170.     float: left;
  171.     height: 40px;
  172.     background: #f7f8fa;
  173.     padding: 0px 20px;
  174.     border-radius: 100px;
  175.     line-height: 40px;
  176.     color: #333333;
  177.     text-decoration: none;
  178.     margin: 30px 13px 0px 0px;
  179.     }
  180.     .lm a:hover{
  181.        background-color: #f11717;
  182.        color: #fff;
  183.     }
  184.     ul.xxk,.box .bottom ,.lm{
  185.        display: none;
  186.     }
  187.     ul.xxk.active,.box .bottom.active{
  188.       display: grid;
  189.     }
  190.     .lm.active{
  191.         display: block;
  192.     }
  193. </style>
  194. <body>
  195.     <div class="box">
  196. <ul class="top">
  197.    <li class="active" data-t="1">
  198.     <a href="#">词典查询</a>
  199.     <b></b>
  200.    </li>
  201.     <li data-t="2">
  202.         <a href="#">全部词典</a>
  203.     <b></b>
  204.     </li>
  205.   <li data-t="3">
  206.     <a href="#">最近更新</a>
  207.     <b></b>
  208.   </li>
  209. </ul>
  210. <div class="bottom active" data-t="1">
  211.     <h3>编程词典</h3>
  212.     <p>服务码农的在线技术手册</p>
  213.     <div class="search">
  214.         <input type="text" placeholder="请输入查询内容">
  215.         <span></span>
  216.         <button>搜索</button>
  217.     </div>
  218.     <p><span>热门搜索:</span>
  219.         <a href="#">PHP</a>
  220.         <a href="#">MySQL</a>
  221.         <a href="#">Jquery</a>
  222.         <a href="#">HTML</a>
  223.         <a href="#">CSS</a>
  224.     </p>
  225. </div>
  227. <ul class="xxk" data-t="2">
  228.     <li><a href="#">
  229. <h3>【学习 PHP】</h3>
  230. <div class="tp">
  231.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  232.     <p>PHP一种被广泛应用的开...</p>
  233. </div>
  234.     </a></li>
  235.     <li><a href="#">
  236. <h3>【学习 PHP】</h3>
  237. <div class="tp">
  238.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  239.     <p>PHP一种被广泛应用的开...</p>
  240. </div>
  241.     </a></li>
  242.     <li><a href="#">
  243. <h3>【学习 PHP】</h3>
  244. <div class="tp">
  245.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  246.     <p>PHP一种被广泛应用的开...</p>
  247. </div>
  248.     </a></li>
  249.     <li><a href="#">
  250. <h3>【学习 PHP】</h3>
  251. <div class="tp">
  252.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  253.     <p>PHP一种被广泛应用的开...</p>
  254. </div>
  255.     </a></li>
  256.     <li><a href="#">
  257. <h3>【学习 PHP】</h3>
  258. <div class="tp">
  259.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  260.     <p>PHP一种被广泛应用的开...</p>
  261. </div>
  262.     </a></li>
  263.     <li><a href="#">
  264. <h3>【学习 PHP】</h3>
  265. <div class="tp">
  266.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  267.     <p>PHP一种被广泛应用的开...</p>
  268. </div>
  269.     </a></li>
  270.     <li><a href="#">
  271. <h3>【学习 PHP】</h3>
  272. <div class="tp">
  273.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  274.     <p>PHP一种被广泛应用的开...</p>
  275. </div>
  276.     </a></li>
  277.     <li><a href="#">
  278. <h3>【学习 PHP】</h3>
  279. <div class="tp">
  280.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  281.     <p>PHP一种被广泛应用的开...</p>
  282. </div>
  283.     </a></li>
  285. </ul>
  287. <div class="lm" data-t="3">
  288.     <a href="#">php array_diff_assoc()函数</a>
  289.     <a href="#">php array_merge_recursive()函数</a>
  290.     <a href="#">TCP/IP 邮件</a>
  291.     <a href="#">TCP/IP 协议</a>
  292.     <a href="#">TCP/IP 寻址</a>
  293.     <a href="#">Web Forms - 数据库连接</a>
  294.     <a href="#">Web Forms - ArrayList 对象</a>
  295.     <a href="#">Web Forms - Button 控件</a>
  296.     <a href="#">Web Forms - TextBox 控件</a>
  297.     <a href="#">Web Forms - HTML 表单</a>
  298.     <a href="#">Web Forms - 事件</a>
  299.     <a href="#">ionic Toggle(切换开关)</a>
  300.     <a href="#">ionic 表单和输入框</a>
  301. </div>
  302.     </div>
  303.     <script>
  304. let a=document.querySelector('.top')
  305. let li=document.querySelectorAll('.top li')
  306. let arr=[document.querySelector('ul.xxk'),document.querySelector('.box .bottom'),document.querySelector('.lm')]
  307. a.addEventListener('click',function(){
  308.  if(event.target.tagName==='A'){
  309.   li.forEach(i=>i.classList.remove('active'))
  310.   event.target.classList.add('active')
  311.   event.target.parentNode.classList.add('active')
  312. arr.find(i=>{
  313.     i.classList.remove('active')
  314. if(event.target.parentNode.dataset.t===i.dataset.t){
  315.  i.classList.add('active')
  316. }})}})
  317.     </script>
  318. </body>
  319. </html>

3.数组api

  1.   <script>
  2.         // 1.concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
  3.         let arr=[1,2,3]
  4.         let b=[3,4,5]
  5.         console.log(arr.concat(b));
  7.         // 2.lastIndexOf()方法从数组的末尾开始向前查找满足条件的索引
  8.         console.log(arr.lastIndexOf(3));
  10.         // 3.toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
  11.         console.log(arr.toString());
  13.         // 4.reverse()反向排序
  14.         console.log(arr.reverse());
  16.         // 5.includes() 方法返回一个布尔值，表示某个数组是否包含给定的值
  17.         console.log(arr.includes(5));
  18.     </script>
上一条：类数组与纯数组，dom遍历与常用的API下一条：JS数据类型和遍历循环
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多