Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿京东轮播图 php中文网编程词典选项卡 数组api
Blogger Information
Blog 20
fans 0
comment 0
visits 11020
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿京东轮播图 php中文网编程词典选项卡 数组api
喜
Original
505 people have browsed it

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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post