用原生JS实现爱奇艺首页导航栏

约定不等于承诺〃 2023-08-17 15:46 119阅读 0赞

最近接到领导的任务，要给外面的学生上几节前端课，备课的时候准备了一些小项目，在此记录一下。

以下是爱奇艺首页的一个导航栏，用原生js写的，静态页面效果如下：

![1464687-20190904000636192-481861843.png][]

代码如下：

1 <html>
      2 <head>
      3     <title>爱奇艺</title>
      4     <meta charset="utf-8">
      5     <style type="text/css">
      6         * {
      7             padding: 0;
      8             margin: 0;
      9         }
     10         .wrap {
     11             height: 520px;
     12             background-color: #000;
     13             width: 100%;
     14         }
     15         .wrap .img-wrap {
     16             height: 100%;
     17             margin: 0 auto;
     18             background-image: url('1.jpg');
     19             background-repeat: no-repeat;
     20             background-position: 50% 50%;
     21             background-size: auto 100%;
     22             position: relative;
     23         }
     24         /* 媒体查询 */
     25         @media screen and (max-width: 2000px) {
     26             .wrap .img-wrap .item-list {
     27                 right: 10%;
     28             }
     29         }
     30         @media screen and (max-width: 1600px) {
     31             .wrap .img-wrap .item-list {
     32                 right: 8%;
     33             }
     34         }
     35         @media screen and (max-width: 1300px) {
     36             .wrap .img-wrap .item-list {
     37                 right: 5%;
     38             }
     39         }
     40         .wrap .img-wrap .item-list {
     41             box-sizing: border-box;
     42             height: 100%;
     43             background-color: rgba(0,0,0,0.7);
     44             width: 280px;
     45             position: absolute;
     46             
     47             list-style: none;
     48             padding: 10px 0;
     49         }
     50         .wrap .img-wrap .item-list li {
     51             padding: 0 15px;
     52         }
     53         .wrap .img-wrap .item-list li.active {
     54             /*background-color: -webkit-linear-gradient(left, rgba(0,0,0,.3), rgba(0,0,0,0.1));*/
     55             background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0));
     56             cursor: pointer;
     57         }
     58         .wrap .img-wrap .item-list li span {
     59             line-height: 40px;
     60             color: #eee;
     61             font-size: 16px;
     62         }
     63         .wrap .img-wrap .item-list li.active span {
     64             color: #00be06;
     65             display: block;
     66         }
     67         .wrap .img-wrap .item-list li.active span:nth-child(1) {
     68             font-size: 24px;
     69             transition: font-size 0.2s;
     70         }
     71         .wrap .img-wrap .item-list li.active span:nth-child(2) {
     72             display: none;
     73         }
     74     </style>
     75 </head>
     76 <body>
     77     <div class="wrap">
     78         <div class="img-wrap">
     79             <ul class="item-list">
     80             </ul>
     81         </div>
     82     </div>
     83     <script type="text/javascript">
     84         let items = [
     85                 {
     86                     title: '遇见幸福',
     87                     desc: '24点体会人生百味',
     88                     url: '1.jpg'
     89                 },
     90                 {
     91                     title: '中国达人秀',
     92                     desc: '真假岳岳在线劈叉',
     93                     url: '2.jpg'
     94                 },
     95                 {
     96                     title: '中国新说唱',
     97                     desc: '全国4强诞生！',
     98                     url: '3.jpg'
     99                 },
    100                 {
    101                     title: '做家务',
    102                     desc: '魏大勋花钱做音乐',
    103                     url: '4.jpg'
    104                 },
    105                 {
    106                     title: '扫毒2',
    107                     desc: '刘德华硬战古天乐',
    108                     url: '5.jpg'
    109                 },
    110                 {
    111                     title: '加油',
    112                     desc: '郝泽宁隔屏告白福子',
    113                     url: '6.jpg'
    114                 },
    115                 {
    116                     title: '小欢喜',
    117                     desc: '宋倩乔卫东重归于好',
    118                     url: '7.jpg'
    119                 },
    120                 {
    121                     title: '谋爱上瘾',
    122                     desc: '契约夫妇遇感情危机',
    123                     url: '8.jpg'
    124                 },
    125                 {
    126                     title: '此食此客',
    127                     desc: '啤酒花蛤夏日绝配',
    128                     url: '9.jpg'
    129                 },
    130                 {
    131                     title: '爱奇艺特别策划',
    132                     desc: '我们的70年',
    133                     url: '10.jpg'
    134                 }
    135         ];   // 需要展示的数据，通常从后端获取
    136 
    137         let curIndex = 0;   // 当前索引
    138 
    139         let isAutoMove = true;  // 是否可以自动改变图片
    140         
    141         let interval = 1000;  // 自动轮播的间隔时间
    142 
    143         // 封装函数：生成新的标签
    144         function createTag(tag) {
    145             return document.createElement(tag);
    146         }
    147 
    148         // 封装函数：生成文本节点
    149         function createText(text) {
    150             return document.createTextNode(text);
    151         }
    152 
    153         // 封装函数：初始化列表
    154         function initItemList() {
    155             let ul = document.getElementsByClassName('item-list')[0];
    156             
    157             for (let i = 0; i < items.length; i++) {
    158                 let li = createTag('li');
    159                 if (i == 0) { li.classList.add('active') }
    160                 let span1 = createTag('span');
    161                 let span2 = createTag('span');
    162                 let span3 = createTag('span');
    163                 let text1 = createText(items[i].title);
    164                 let text2 = createText('：');
    165                 let text3 = createText(items[i].desc);
    166                 span1.appendChild(text1);
    167                 span2.appendChild(text2);
    168                 span3.appendChild(text3);
    169 
    170                 li.appendChild(span1);
    171                 li.appendChild(span2);
    172                 li.appendChild(span3);
    173                 ul.appendChild(li);
    174 
    175                 addHoverListener(li, i);
    176             } 
    177         }
    178 
    179         // 鼠标hover右侧栏时改变背景图片及文字样式
    180         function addHoverListener(trigger, index) {
    181             trigger.addEventListener('mouseenter', function () {
    182                 curIndex = index;   // 保存当前索引
    183                 changeImage();
    184                 activeText();
    185             });
    186         }
    187 
    188         // 根据index改变背景图片
    189         function changeImage() {
    190             console.log('curIndex: ', curIndex);
    191             let imgUrl = items[curIndex].url;
    192             let imgWrap = document.getElementsByClassName('img-wrap')[0];
    193             imgWrap.style.cssText = "background-image: url('" + imgUrl + "')";
    194         }
    195         
    196         // 根据index改变右侧激活文本的样式
    197         function activeText() {
    198             let activeObj = document.getElementsByClassName('active')[0];
    199             let li = document.getElementsByTagName('li')[curIndex];
    200             if (activeObj) {
    201                 activeObj.classList.remove('active');
    202             }
    203             li.classList.add('active');
    204         }
    205 
    206         // 鼠标移入移出wrap区域时响应关闭、开启自动轮播
    207         function addEnterListener() {
    208             let wrap = document.getElementsByClassName('wrap')[0];
    209             wrap.addEventListener('mouseenter', function () {
    210                 isAutoMove = false;
    211             });
    212             wrap.addEventListener('mouseleave', function () {
    213                 isAutoMove = true;
    214             });
    215         }
    216 
    217         // 定时切换图片：使用定时器setInterval(function(){}, time)
    218         function autoMove() {
    219             let timer = setInterval(function () {
    220                 if (isAutoMove) {
    221                     if (curIndex < 9) {
    222                         curIndex ++;
    223                     } else {
    224                         curIndex = 0;
    225                     }
    226                     changeImage();
    227                     activeText();
    228                 }
    229             }, interval);
    230         }
    231 
    232         window.onload = function () {
    233             initItemList();
    234             addEnterListener();
    235             autoMove();
    236         }
    237     </script>
    238 </body>
    239 </html>

转载于:https://www.cnblogs.com/yuanyiming/p/11456570.html

[1464687-20190904000636192-481861843.png]: /images/20230810/ad03403376dd4b538db9bcba2b629a87.png