HTML+CSS轮播图动态切换与圆点指示器实现-优快云博客

本文链接：https://blog.youkuaiyun.com/litianll/article/details/120621576

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  
  <div class="wrapper">
    <!-- 初始是第五张图 所以要-600 -->
    <div style="left: -600px;" class="wrap">
      <img src="./img/05.jpg" alt="">
      <img src="./img/05.jpg" alt="">
      <img src="./img/02.jpg" alt="">
      <img src="./img/03.jpg" alt="">
      <img src="./img/04.jpg" alt="">
      <img src="./img/05.jpg" alt="">
      <img src="./img/01.jpg" alt="">
    </div>
    <div class="dot-wrapper">
      <span class="dot on"></span>
      <span class="dot on"></span>
      <span class="dot on"></span>
      <span class="dot on"></span>
      <span class="dot on"></span>
    </div>
    <span class="jt left">&lt;</span>
    <span class="jt right">&gt;</span>
  </div>


  <script>
   var wrap = document.querySelector('.wrap')
   var num = -600
   var leftBtn = document.querySelector('.left')
   var rightBtn = document.querySelector('.right')
   var timer = null
   //代表当前轮播的图片的索引
   var index = 0;
   //选中所有圆点
   var dots = document.querySelectorAll('.dot')
   //给圆点添加/移除class
   function setCurrentDot(){
     for (var k in dots) {
       if(index === k){
         dots[k].classList.add('on')
       }else{
         dots[k].classList.remove('on')
       }
     }
   }
   //给圆点添加点击事件
   for (var i = 0;i < dots.length; i++) {

     (function (j) {
       dots[j].addEventListener('click',function (){
         //移动到对应的图片
         startmove(wrap, -600*j)
         //改变index
         index = j
         setCurrentDot()
         num = -600 * j
       })
     }(i))
   }



   var wrapper = document.querySelector('.wrapper')
   //当鼠标划入轮播区域的时候 让自动轮播停止
   wrapper.addEventListener('mouseenter',function(){
     clearInterval(timer)
   })
   //当鼠标移开 轮播区域的时候 继续自动轮播
   wrapper.addEventListener('mouseleave',function(){
    autoPlay()
   })
   autoPlay()

   //addEventListener('event',fn)
   //第一个参数就是添加的事件名称  第二个参数  触发事件的处理函数
   leftBtn.addEventListener('click',function (){
     prev()
   })
   rightBtn.addEventListener('click',function (){
     next()
   })
  //  var left = document.querySelector('.left')
  //  //给left这个标签添加一个点击事件  当left标签被点击的时候 会执行 传入的函数
  //  left.addEventListener('click',function(){
  //    console.log('123')
  //  })
  //  setInterval(() => {
  //    if (num === -3000)
  //    num = 0;
  //    num -= 600
  //    wrap.style.left = num + 'px'
  //  },500); 
  //切换下一张图片
    function next() {
        if(num === -3000) {
            num = 0
            wrap.style.left = num
        }
        num -= 600
        startmove(wrap, num)
        // wrap .style.left = num + 'px'
        if (index > 4) {
          index = 0
        }
        index++
        setCurrentDot()
    }
    //切换上一张图片
    function prev() {
        if (num === 0) {
            num = -3000
            wrap.style.left = num
        }
        num += 600
        // wrap.style.left = num + 'px'
        startmove(wrap, num)
        if (index < 0) {

        }
    }
    //自动轮播
    function autoPlay() {
       timer = setInterval(() => {
            next()
        }, 500);
    }
    //缓动函数 （图片到达的目标位置 — 图片当前所在的位置） / 8

    // @param { dom }  操作的dom对象
    // @param { target } 移动的目标位置

    function startmove(dom, target) {
            clearInterval(dom.timer)
            dom.timer = setInterval(() => {
            //拿到容器当前所在的位置
            var current = getStyle(dom, 'left')
            //计算缓动的速率
            var iSpeed = (target - current) / 8
            //对速率取整
            iSpeed = iSpeed > 0 ? Math.cell(iSpeed) : Math.floor(iSpeed)
            //缓动
            dom.style.left = current + iSpeed + 'px'
            if (current === target) {
                //清除定时器 clearInterval
                clearInterval(dom.timer)
            }
        },30)
    }

    // 获取dom对象css样式的值
    // @param { dom }  操作的dom对象
    // @param { style: String } 想要获取的css属性名
    function getStyle(dom, style) {
        // getComputedStyle(dom) 返回一个具有dom节点所有css样式的对象
        // getComputedStyle 这个方法 在ie8 及其以下的浏览器 不兼容
        return parseInt(getComputedStyle(dom)[style])
    }
    </script>
</body>
</html>

这是css的样式

.wrapper{
  position: relative;
  top: 200px;
  width: 600px;
  height: 400px;
  /* 溢出部分隐藏 */
  overflow: hidden;
  margin: 0 auto;
  /* margin-top: -200px; */
}
.wrapper .wrap{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4200px;
  height: 400px;
  z-index: 1;
}
.wrap img{
  float: left;
  width: 600px;
  height: 400px;
}
.dot-wrapper {
  position: absolute;
  left: 225px;
  bottom: 0px;
  width: 150px;
  height: 40px;
  line-height: 40px;
  z-index: 5;
}
.dot-wrapper .dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:#ccc;
  margin-left: 5px;
}
.dot-wrapper .dot.on{
  background-color: #ff4400;
}
.jt{
  position: absolute;
  top: 40%;
  color:#fff;
  padding: 0px 14px;
  font-size: 55px;
  text-align: center;
  z-index: 2;
  /* 箭头隐藏 */
  display: none;
}
.jt.left{
  left: 10px;
}
.jt.right{
  right: 10px;
}
/* 当鼠标滑到最外层容器的时候 让箭头显示 */
.wrapper:hover .jt{
  display: block;
  /* 透明度  取值范围0-1 0是透明   */
  opacity: 0.4;
}
.wrapper .jt:hover{
  opacity: 1;
}

欢迎留言交流！😊