我的第一个轮播图

需求分析：

设计一个轮播图，使其可以自动播放，并且点击按钮时可以切换图片。

1：先设计我们的html结构。

2：监听我们的img， span，btn1， btn2。

3：声明一个index控制图片的地址，声明一个qwe控制定时器。

4：用函数fn来控制定时器的运行，调用函数使其图片动起来。

5：监听div，鼠标放上去时关闭定时器，移开时调用函数启用定时器。

6：设置点击事件，点击btn1切换上一张图片，点击btn2切换下一张图片。

设置样式部分

style

<style>
    /* 开始设置样式 */
     * {
        padding: 0;
        margin: 0;
      }
      div {
        width: 700px;
        height: 320px;
        margin: 100px auto;
        position: relative;
      }
      p {
        position: absolute;
        left: 0;
        bottom: 0;
        line-height: 50px;
        background-color: #666;
        color: #fff;
        width: 100%;
        padding-left: 10px;
        font-size: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
      div > h3{
          position: absolute;
          display: inline-block;
          top: 100px;
          left: 0px;
          width: 50px;
          font-size: 50px;
          background-color: aliceblue;
          cursor:pointer;
      }
      button {
        width: 30px;
        height: 30px;
        font-size: 20px;
        color: #fff;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 30px;
        outline: none;
        position: absolute;
        top: 50%;
        margin-top: -15px;
    }
    .btn1 {
        right: 0;
    }

    .btn2 {
        left: 0;
    }
</style>

div

<div>
        <img src="./images/b01.jpg" alt="" />
        <p><span>第1张图片</span></p>
        
        <button class="btn1">&gt;</button>
        <button class="btn2">&lt;</button>
      </div>

js部分

<script>
          
          let img=document.querySelector('img');//获取图片
          let span=document.querySelector('p>span');//获取span
          let btn1=document.querySelector('.btn1');//获取上一张图片的按钮
          let btn2=document.querySelector('.btn2');//获取下一张图片的按钮
          let index=1;
          let qwe;
          function fn(){//函数控制轮播
              qwe=setInterval(function(){
                  index++;
                  if(index==10){
                      index=1;
                  }
                  img.src=`./images/b0${index}.jpg`
                  span.innerText=`第${index}张图片`
              },3000)
          }
        fn();
        let div=document.querySelector('div');
        div.addEventListener('mouseenter', function() {//当鼠标放在div身上时
            clearInterval(qwe)
        })
        div.addEventListener('mouseleave', function() {//当鼠标离开div身上时
            fn();
        })
        btn1.onclick=function(){//点击切换上一站图片
            index++;
            if(index==10){
                index=1;
            }
            img.src=`./images/b0${index}.jpg`
            span.innerText=`第${index}张图片`
        }
        btn2.onclick=function(){//点击切换下一站图片
            index--;
            if(index==0){
                index=9;
            }
            img.src=`./images/b0${index}.jpg`
            span.innerText=`第${index}张图片`
        }
      </script>