原生js实现轮播图效果

<!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>
  <style>
      /* css代码部分 */
      *{margin:0;padding:0;}
      ol,ul,li{list-style: none;}
      .wrap{
        position: relative;
        width:750px;
        height:300px;
        margin:200px auto;
        outline:4px dotted red;
      }
      .slide{
        position: absolute;
      }
      .slide>li{
         position: absolute;
         left:0;
         top:0;
         width:750px;
         height:300px;
         display:none;
      }
      .slide img{
         width:100%;
         height:100%;
      }

      .nav{
         width:100%;
         position: absolute;
         top:50%;
         margin-top:-35px;
         display: flex;
         justify-content: space-between;
      }
      .nav a{
         display:block;
         text-decoration: none;
         padding:8px 4px;
         background-color: #bbb;
         color:white;
         font-size: 40px;
         opacity: 0.2;      
      } 

      .bottom-nav{
        position: absolute;
        bottom:16px;
        left:50%;
        margin-left:-100px;
        display:flex;
        justify-content: space-evenly;
        width:200px;
      }

      .bottom-nav li{
         width:24px;
         height:24px;
         text-align: center;
         background-color: #fff;
         line-height: 24px;
         border-radius: 50%;
         cursor: pointer;
      }
      .bottom-nav .active{
         background-color: red;
      }
      .slide .show{
         display: block;
      }
  </style>
</head>
<body>
    <!-- HTML代码部分 -->
    <div class="wrap">
        <ul class="slide">
            <li class="show"><img src="./images/1.png" alt=""></li>
            <li><img src="./images/2.png" alt=""></li>
            <li><img src="./images/3.png" alt=""></li>
            <li><img src="./images/4.png" alt=""></li>
            <li><img src="./images/5.png" alt=""></li>
        </ul>
        <!-- 左右导航 -->
        <div class="nav">
            <a href="#" class="left">&lt;</a>
            <a href="#" class="right">&gt;</a>
        </div>
        <!-- 底部导航 -->
        <ol class="bottom-nav">
           <li class="active">1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
        </ol>
    </div>
    <script>
// js代码部分
         var wrap = document.querySelector('.wrap');
         var li = document.querySelectorAll('.slide>li');
         var leftBtn = document.querySelector('.nav>.left');
         var rightBtn = document.querySelector('.nav>.right');
         var bottomBtn = document.querySelectorAll('.bottom-nav>li');
         // 1.自动轮播功能
         //设置自动轮播计时器 
         var timer = setInterval(slideFun,2000);
         var cutIndex=0;  //当前图片显示的索引
         function slideFun(){
             cutIndex++;
             if(cutIndex>li.length-1){
                 cutIndex=0;
             }
             show(cutIndex)
         }
        // 根据索引显示隐藏图片
         function show(cutIndex){
              //设置全部图片隐藏  底部导航背景颜色白色
              for(var i=0;i<li.length;i++){
                 li[i].className='';
                 bottomBtn[i].className='';
             }
            //设置当前展示的导航效果和当前显示图片
            li[cutIndex].className='show';
            bottomBtn[cutIndex].className='active';
         }
         // 2.鼠标移入 轮播停止
        wrap.onmouseover=function(){
            leftBtn.style.opacity=0.8;
            rightBtn.style.opacity=0.8;
            clearInterval(timer);
        }
        wrap.onmouseout=function(){
            leftBtn.style.opacity=0.2;
            rightBtn.style.opacity=0.2;
            timer=setInterval(slideFun,2000)
        }
         // 3.左右导航功能
         leftBtn.onclick=function(){
             cutIndex--;
             if(cutIndex<0){
                 cutIndex=li.length-1;
             }
             show(cutIndex);
         }
         rightBtn.onclick=function(){
            cutIndex++;
             if(cutIndex>li.length-1){
                 cutIndex=0;
             }
             show(cutIndex);
         }
         // 4.底部导航功能
         for(var i=0;i<bottomBtn.length;i++){
             bottomBtn[i].index=i;
             bottomBtn[i].onclick=function(){
                 cutIndex = this.index;
                 show(cutIndex);
             }
         } 
    </script>
</body>
</html>
最后编辑于：2020.05.08 14:24:55
禁止转载，如需转载请通过简信或评论联系作者。