网页前端开发，上好佳项目导航条和轮播图

　　项目目标
　　项目结构
　　html导航条部分
                       
             
首页
             
品牌故事
             
产品
             
关于我们
         
      
base.css
　　基础样式统一设置：*{     margin: 0;     padding: 0;     box-sizing: border-box; }  ul, ol, li{     list-style: none; }  a{     text-decoration: none; }  /* 清除浮动 margin塌陷 */ .clearfix::before, .clearfix::after{     content: ＂＂;     display: table; }  .clearfix::after{     clear:both; }index.css导航条部分.header{     width: 100%;     height: 87px;     background-color: #FDEDDC;     z-index: 999;     overflow: hidden;     position: fixed; }  .header-topbar{     width: 80%;     height: 75px;     /* background-color: aquamarine; */     margin: auto; }  .header .header-topbar .header-topbar-logo{     width: 104px;     height: 52px;     /* background-color: blueviolet; */     margin-top: 18px;     background: url(/static/images/logo1.png) no-repeat;     background-size: cover;     float: left; }  .header .header-topbar ul{     width: 80%;     height: 60px;     float: right;     /* background-color: chocolate; */     margin-right: 40px;     margin-top: 15px; }  .header .header-topbar ul li{     width: 20%;     float: left;     line-height: 60px;     font-size: 16px;     position: relative; }  .header .header-topbar ul li a{     color: #646464;     position: relative;     left: 150px; }  .header .header-topbar ul li a:hover{     color: #A30000; }轮播图原理
　　当前轮播图设置4张图片，通过绝对定位显示在相同位置，但是会出现重叠覆盖的情况，因此，定时器轮流选择图片，被选中图片显示，其他图片隐藏。
　　点击白色圆点和左右箭头也可以选择图片，当鼠标悬停在轮播图上停止轮播，鼠标离开继续轮播。html轮播图部分                                                    
         
         
         
         
     
      <     > index.css轮播图部分/* 轮播图 */ .banner{     width: 100%;     position: relative; }  .banner-imglist{     width: 100%;     position: relative; }  .banner-imglist img{     width: 100%;     /* height: 100%; */     /* width: 20%; */     position: absolute; }  /* 轮播图底部圆点 */ .banner-dotlist{     width: 100px;     height: 15px;     /* background-color: white; */     z-index: 2;     position: absolute;     left: 50%;     top: 630px;     margin-left: -50px; }  .banner-dotlist li{     width:15px;     height:15px;     border:1px solid white;     border-radius: 50%;     float:left;     margin-left:10px;     cursor: pointer; }  /* pre和next按钮 */ .banner-pre,.banner-next{     display:block;     width:40px;     height:40px;     border:1px solid white;     text-align: center;     line-height:35px;     font-size:30px;     position:absolute;     z-index:2;     top:360px;     margin-top:-25px;     color:white;     border-radius:50%; }  .banner-pre{     left:40px; }  .banner-next{     right:40px; }js轮播图部分function change_banner(current_select_idx){     $(＂.banner-imglist img＂).eq(current_select_idx).fadeIn(500).siblings().fadeOut(100);     $(＂.banner-dotlist li＂).eq(current_select_idx).css({＂backgroundColor＂: ＂white＂}).siblings().css({＂backgroundColor＂: ＂＂}); }  let current_select_idx = 0;     // 当前选择图片序号 let banner_timer = null; let all_imgs_cnt = $(＂.banner-imglist＂).children().length; console.log(all_imgs_cnt); let $banner_imglist = $(＂.banner-imglist＂);  $banner_imglist.offset({top: 50});  change_banner(current_select_idx);  function startTimer(){     banner_timer = setInterval(function(){         current_select_idx = (current_select_idx + 1) % all_imgs_cnt;         change_banner(current_select_idx);     }, 3600); }  function main(){     startTimer();      $(＂.banner-imglist＂).mouseover(function(){         clearInterval(banner_timer);     });      $(＂.banner-imglist＂).mouseleave(function(){         startTimer();     });      $(＂.banner-pre＂).click(function(){         current_select_idx -= 1;         if(current_select_idx === -1)              current_select_idx = all_imgs_cnt - 1;                  change_banner(current_select_idx);     });      $(＂.banner-next＂).click(function(){         current_select_idx += 1;         if(current_select_idx === all_imgs_cnt)              current_select_idx = 0;                  change_banner(current_select_idx);     });      $(＂.banner-dotlist li＂).click(function(){         let index = $(this).index();         // alert(index);         change_banner(index);     }); }  export{      main }导航条视频讲解
　　视频加载中...