7-31：HTML学习#20

今日学习：JS轮播图，二级菜单。学习时长：5h。

 <div class="burger">
          <div class="top-line"></div>
          <div class="mid-line"></div>
          <div class="bottom-line"></div>
        </div>
      </nav>
      <header>
        <div class="box4">
          <div class="nav-shop">
            <div class="nav-content">
              <div class="nav-item">
                <a href="">商城首页</a>
                <a href="">所有宝贝</a>
                <a href="">热销推荐</a>
                <a href="">新品专区</a>
                <a href="">手办专区</a>
                <a href="">游戏专区</a>
                <a href="">服饰专区</a>
              </div>
              <div class="detail">
                <div class="detail-min">
                  <a href="">爆款专区</a>
                  <a href="">服饰折扣专区</a>
                  <a href="">福袋专区</a>
                  <a href="">情人节</a>
                  <a href="">降价款专区</a>
                </div>
                <div class="detail-min">
                  <a href="">手办</a>
                  <a href="">服饰</a>
                  <a href="">游戏</a>
                  <a href="">周边</a>
                </div>
                <div class="detail-min">
                  <a href="">服饰</a>
                  <a href="">手办</a>
                  <a href="">游戏</a>
                  <a href="">周边</a>
                </div>
                <div class="detail-min">
                  <a href="">手办</a>
                  <a href="">游戏</a>
                  <a href="">艺术设定集</a>
                  <a href="">服饰</a>
                </div>
                <div class="detail-min">
                  <a href="">典藏手办</a>
                  <a href="">Q版手办</a>
                  <a href="">其他手办</a>
                </div>
                <div class="detail-min">
                  <a href="">蜘蛛侠</a>
                  <a href="">极限竞速</a>
                  <a href="">舞力全开</a>
                  <a href="">王者荣耀</a>
                  <a href="">原神</a>
                </div>
                <div class="detail-min">
                  <a href="">帽子</a>
                  <a href="">上衣</a>
                  <a href="">夏装</a>
                  <a href="">秋装</a>
                  <a href="">鞋子</a>
                </div>
              </div> 
            </div>
          </div> 
          <div class="shop-wrap">
            <div class="shop-list">
              <img src="img/shop1.jpg">
              <img src="img/shop2.jpg">
              <img src="img/shop3.jpg">
              <img src="img/shop4.jpg">
              <img src="img/shop2.jpg">
            </div>
            <div class="shop-arrow">
              <a href="javascript:;" class="shop-left"><</a>
              <a href="javascript:;" class="shop-right">></a>
            </div>
            <ul class="shop-circlelist">
              <li class="shop-circle active" data-n="0"></li>
              <li class="shop-circle" data-n="1"></li>
              <li class="shop-circle" data-n="2"></li>
              <li class="shop-circle" data-n="3"></li>
              <li class="shop-circle" data-n="4"></li>
            </ul>
          </div>
        </div> 




let oleft=document.querySelector(".shop-left");
let oRight=document.querySelector(".shop-right");
let oImgList=document.querySelector(".shop-list");
//克隆第一张图片
let clonefirstImg=oImgList.firstElementChild.cloneNode();
oImgList.appendChild(clonefirstImg); 


//图片索引,第几张图片

let index=0;
oRight.addEventListener ("click",()=>{
        index++;
        oImgList.style.left=index*-100 + "%";
        oImgList.style.transition="1s ease";
    if(index===5){
        //定时器1s，取消过渡
       setTimeout(() => {
        index=0;
        oImgList.style.left=0;
        oImgList.style.transition="none";
       }, 1000);
    }
})
oleft.addEventListener("click",()=>{
    index--;
    if(index===-1){
        oImgList.style.left=5*-100+"%";
        oImgList.style.transition="none";
        setTimeout(() => {
            index=4;
            oImgList.style.left=index*-100+"%";
            oImgList.style.transition="1s ease";
        },  0);
    }else{
        oImgList.style.left=index*-100+"%";
        oImgList.style.transition="1s ease";
    }
})


.nav-shop{
    width: 100%;
    height: 60px;
    background-color:rgb(239, 239, 239);
    position:fixed;
    top: 80px;
    z-index: 100;
    overflow: hidden;
 }
 .nav-content{
    width: 1000px;
    height: 60px;
    margin: 0 auto;
}
.nav-item{
    display: flex;
}
.nav-item a{
    text-decoration: none;
    height: 60px;
    flex-grow: 1;
    text-align: center;
    line-height: 60px;
    color: black;
}
.nav-item a:hover{
    background-image: linear-gradient(rgba(255,255,255,0.3),95%,#ff6b19 90%);
    color: #ff6b19;
}
/*导航栏伸缩栏*/
.detail{
    width: 100%;
    height:0px;
    background-color:rgb(239, 239, 239,0.7);
    display: flex;
    overflow: hidden;
    transition: height 0.3s;
    z-index: 1000;
}
.nav-content:hover .detail{
    height: 250px;
}
.detail-min{
    height: 100%;
    width: 143px;
}
.detail-min a{
    display: block;
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 15px;
    line-height: 50px;
}
.detail-min a:hover{
    text-decoration: underline;
    color: #ff6b19;
}
/*商城轮播图*/
.box4{
    width: 100%;
    height: 700px;
}
.shop-wrap{
    width: 100%;
    height: 500px;
    position: relative;
    top:140px;
    overflow: hidden;
}
.shop-list{
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    transition: 1s ease;
}
.shop-list img{
    width: 100%;
    height: 100%;
}
.shop-arrow a{
    display: block;
    width: 50px;
    height: 70px;
    background-color:gray;
    color: #000;
    user-select: none;
    font-size: 30px;
    text-align: center;
    line-height: 70px;
    text-decoration: none;
    position: relative;
}
.shop-left{
    position: relative;
    top: -300px;
}
.shop-right{
    position: relative;
    top: -370px;
    left:1468px;
}
.shop-circlelist{
    display: flex;
    position: relative;
    width: 240px;
    height: 80px;
    z-index: 2;
    top:-170px;
    left: 680px;
}
.shop-circle{
    margin: 0 5px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    list-style: none;
}
.shop-circle.active{
    background-color: #ff6b19;
}