8-3：HTML学习#22

今日学习：JS轮播图文字，鼠标移入移除。学习时长：5h。

.box5{
    width: 100%;
    height: 800px;
}
.box6{
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    position: relative;
    top: 100px;
    display: flex;
}
.new-left{
    width:  700px;
    height: 600px;
    position: relative;
    overflow: hidden;
}
.new-images{
    position:absolute;
    width: 3500px;
    left: 0;
    top: -1px;
    transition: 1s;
    font-size: 0;
}
.new-images img{
    width: 700px;
    height: 540px;
}
.new-title{
    width: 100%;
    height: 60px;
    position: absolute;
    display: flex;
    bottom: 0px;
}
.new-title a{
    width: 140px;
    height: 60px;
    text-decoration: none;
    background-color: rgb(239, 239, 239);
    line-height: 60px;
    text-align: center;
    color: black;
}
.new-title .new-active{
    color:#ff6b19;
    border: 1px solid #ff6b19;
    transition: 1s;
}
.new-right{
    width: 500px;
    height: 600px;
    background-color: aqua;
}
.new-center{
    width: 500px;
    height: 80px;
    top: 100px;
    display: flex;
}
.new-center a{
    width: 167px;
    height: 80px;
    text-decoration: none;
    text-align: center;
    line-height: 80px;
    color: black;
}
.new-center a:hover{
    background-image: linear-gradient(rgba(255,255,255,0.3),95%,#ff6b19 90%);
}




+function(){
  let title=document.querySelector(".new-title")
  let left=document.querySelector(".new-left")
  //鼠标放在上面
  title.onmouseover=function(e){
    let obj=e.target;
    let index=parseInt(obj.getAttribute("data-id"));
    let image=document.querySelector(".new-images");
    image.style.left=-700*index+"px";
    let brotherAndMe=obj.parentElement.children;
    for(let i=0;i<brotherAndMe.length;i++){
        brotherAndMe[i].classList.remove("new-active");
    }
    obj.classList.add('new-active')
    clearInterval(loop);
  }
  let loop;
//鼠标移除后继续
left.onmouseout=function(){
    loop=setInterval(function() {
        let activeObj=document.querySelector(".new-title a.new-active")
        let index=parseInt(activeObj.getAttribute("data-id"));
        let next=index==4?0:index+1;
        let image=document.querySelector(".new-images");
        image.style.left=-700*next+"px";
        let brotherAndMe=activeObj.parentElement.children;
        for(let i=0;i<brotherAndMe.length;i++){
            brotherAndMe[i].classList.remove("new-active");
        }
        brotherAndMe[next].classList.add('new-active')
    
       }, 3000);

}
//鼠标移入后暂停
left.onmouseover=function(){
    clearInterval(loop)
}
//鼠标移出继续
   loop=setInterval(function() {
    let activeObj=document.querySelector(".new-title a.new-active")
    let index=parseInt(activeObj.getAttribute("data-id"));
    let next=index==4?0:index+1;
    let image=document.querySelector(".new-images");
    image.style.left=-700*next+"px";
    let brotherAndMe=activeObj.parentElement.children;
    for(let i=0;i<brotherAndMe.length;i++){
        brotherAndMe[i].classList.remove("new-active");
    }
    brotherAndMe[next].classList.add('new-active')

   }, 3000);

}()