2021-04-16

最新推荐文章于 2021-11-10 17:26:45 发布

Anglela翠花

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/weixin_44634049/article/details/115758622

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
*{margin: 0;padding: 0;}

.main{
  height: 250px;
  width: 500px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.banner{
  height: 100%;
  width: auto;
  white-space: nowrap;
}
.main img{
  display: inline-block;
  width: 500px;
  height: 250px;
}
.btn{
  display: block;
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: rgba(170,170,170,0.4);
}
.btn.btn-left{
  top: 50%;
  transform: translateY(-50%);
  left: 4%;
}
.btn-left:hover{
  background: rgba(170,170,170,0.9);
}
.btn-right:hover{
  background: rgba(170,170,170,0.9);
}
.btn.btn-right{
  top: 50%;
  transform: translateY(-50%);
  right: 4%;
}
.btn-left::before{
  content: "";
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  border-left: 2px solid red;
  border-bottom: 2px solid red;
  top: 50%;
  left: 65%;
  transform: translate(-50%,-50%) rotate(45deg);
}
.btn-right::before{
  content: "";
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  border-left: 2px solid red;
  border-bottom: 2px solid red;
  top: 50%;
  left: 45%;
  transform: translate(-50%,-50%) rotate(225deg);
}
.dots{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.dots span{
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: aliceblue;
}
.transition1{
  transition: all 1s linear;
}
.redDot{
  background-color: red !important;
}


</style>

<body>
<main class="main">
  <div class="banner">
      <img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="1.jpg">
  </div>
  <span class="btn btn-left" onclick="clickBtn(-1)" ></span>
  <span class="btn btn-right"οnclick="clickBtn()"></span>
  <div class="dots">
    <span class="redDot"></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</main>

<script>
    var main = document.querySelector('.main');
    var banner = document.querySelector('.banner');
    var length = banner.children.length;

    var dots = document.querySelector('.dots');
    var dotsList = dots.children;
    var count = 0;
    var timer;


    
    // setInterval(moveRight,2000);
    all();
    function all(){
      // 设置timer标记定时器
      timer= setInterval(Move,2000);
    }
    
    // 开始写总逻辑
    function Move(m){
      if(!m && m!==0){
        moveRight();
      }else if(m<0){
        moveLeft();
      }else{
        count = m;
        banner.style.transform =`translateX(${ -100 * count}%)`;
      }
      dotChange();
    }

    // 左右两箭头按钮的实现
    function clickBtn(m){
      // 每次点击先把上次的定时器效果取消，防止拉锯感和叠加
      clearInterval (timer);
      Move(m);
    }


    // 鼠标悬停轮播停止
    banner.addEventListener("mouseover",function(){
      clearInterval(timer);
    })
    // 鼠标离开2s后开始轮播
    banner.addEventListener("mouseout",function(){
      timer = setInterval(Move,2000);
    })

    function dotChange(){
      // 先把全部红点去掉
      for(var i = 0;i<dotsList.length;i++){
        dotsList[i].classList.remove("redDot");
      }
      // 当计数到最后一页时，红点跑到第一页
      if(count == dotsList.length ){
        dotsList[0].classList.add("redDot");
      }else{
        // 正常情况，轮播到哪页就显示哪页红点
        dotsList[count].classList.add("redDot");
      }
    }
    
    for(let i=0;i<dotsList.length;i++){
      dotsList[i].addEventListener("click",function(){
        clearInterval(timer);
        Move(i)
      })
    }


    
    // 默认往右轮播函数
    function moveRight(){
      if(count==length-1){
        //发现从最后页跳回第一页太显眼，故回去前删掉跳转动画
        banner.classList.remove("transition1");
        // 回到第一页
        count = 0;
        banner.style.transform =`translateX(${ -100 * count}%)`;
        //发现回到第一页需要等4秒，通过定时器调用自身去掉
        setTimeout(function(){         
          Move();
        },50)

      }else{
        count += 1;
        banner.classList.add("transition1");
        banner.style.transform =`translateX(${ -100 * count}%)`;
      }
    }

    // 默认往左轮播函数
    function moveLeft(){
      if(count == 0){
        // 当到第一页时，先去除动画
        banner.classList.remove("transition1");
        // 跳转到最后一页
        count=length-1;
        banner.style.transform =`translateX(${ -100 * count}%)`;
        // 利用定时器快速跳到最后页的前一页
        setTimeout(function(){
          banner.classList.add("transition1");
          banner.style.transform =`translateX(${ -100 * (count-1)}%)`;
          count -= 1;
        },50)
        
      }else{
        // 当退不到第一页时，正常往做轮播
        count -= 1;
        banner.classList.add("transition1");
        banner.style.transform =`translateX(${ -100 * count}%)`;
      }
    }
   
   
</script>
</body>
</html>

Anglela翠花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-16

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫