html + scss + jquery实现的简易轮播图

痛定思痛。 2022-11-25 13:12 80阅读 0赞

## html + scss + jquery实现的简易轮播图 ##

1.  **思路：首先通过定位将所有的色块都层叠起来（不层叠也行，其实就是将所有的内容都隐藏掉，先显示一张就好了），然后通过定时器将他们显示隐藏。**

> 关键在于：如何拿到下一个色块。（有很多办法。文档就很多方法）

**html**

```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="../lib/materialize/css/materialize.css">
        <link rel="stylesheet" href="../css/组件/slider.css">
        <script src="../lib/JQuery/jquery-2.1.4.min.js"></script>
        <script src="../js/组件/slider.js"></script>
    </head>
    <body>
        
        <div class="container">
              <div class="slider-box">
                  <div class="slider-item"><a ></a></div>
                  <div class="slider-item"><a ></a></div>
                  <div class="slider-item"><a ></a></div>
              </div>
              <div class="cur-box">
                  <a >1</a>
                  <a >2</a>
                  <a >3</a>
              </div>
        </div>
    </html>

**scss**

.container { 
        .slider-box { 
            width: 500px;
            margin: 0 auto;
            height: 500px;
            overflow: hidden; .slider-item { 
                // position: absolute;
                width: 500px;
                height: 500px; a { 
                    width: 100%;
                    height: 100%;
                }
                &:nth-of-type(1) { 
                    background-color: salmon;
                    z-index: 3;
                }
                &:nth-of-type(2) { 
                    background-color: beige;
                    z-index: 2;
                }
                &:nth-of-type(3) { 
                    background-color: cadetblue;
                    z-index: 1;
                }
            }
        }
        .cur-box { 
            text-align: center; a { 
                cursor: pointer;
                display: inline-block;
                width: 20px;
                height: 20px;
                text-align: center;
                border-radius: 50%;
                background-color: black;
                color: white;
            }
            .active { 
                background-color: skyblue !important;
                border: 1px solid #adadad;
            }
        }
    }

**生成的css**

.container .slider-box { 
      width: 500px;
      margin: 0 auto;
      height: 500px;
      overflow: hidden;
    }
    
    .container .slider-box .slider-item { 
      width: 500px;
      height: 500px;
    }
    
    .container .slider-box .slider-item a { 
      width: 100%;
      height: 100%;
    }
    
    .container .slider-box .slider-item:nth-of-type(1) { 
      background-color: salmon;
      z-index: 3;
    }
    
    .container .slider-box .slider-item:nth-of-type(2) { 
      background-color: beige;
      z-index: 2;
    }
    
    .container .slider-box .slider-item:nth-of-type(3) { 
      background-color: cadetblue;
      z-index: 1;
    }
    
    .container .cur-box { 
      text-align: center;
    }
    
    .container .cur-box a { 
      cursor: pointer;
      display: inline-block;
      width: 20px;
      height: 20px;
      text-align: center;
      border-radius: 50%;
      background-color: black;
      color: white;
    }
    
    .container .cur-box .active { 
      background-color: skyblue !important;
      border: 1px solid #adadad;
    }

**jquery**

$(()=>{ 
        /** * 箭头函数的this与普通函数的this 是不一样的 * 指根元素 当前调用的函数 */
        //全局的索引
        var i = 0; 
        //全局的定时器
        var time ; //导航点的封装方法 function aClick(){ 
            $('.cur-box > a').click(function (){ 
                var aIndex ;
                //点击当前的a添加高亮样式，其他的兄弟不添加
                $(this).addClass('active').siblings().removeClass('active');
                //因为索引都是对应的 所以可以直接使用索引
                aIndex =  $(this).index();
                //对应的色块or图片显示，其他的兄弟隐藏
                $('.slider-item').eq(aIndex).slideDown().siblings().slideUp();
                console.log(aIndex);
                //先清除一下定时器
                clearInterval(time); //之后又开始定时器 setTimeout(() => { 
                //开启的时候要从当前色块or图片开始轮播    
                     i =  $(this).index();
                    showTime();
                }, 1000);
           });
       }
    
       //封装定时器的方法 function showTime() { 
           time = setInterval(() => { 
            //开始显示第一个色块/图片，其他的兄弟隐藏
            $('.slider-item').eq(i).slideUp().next().slideDown();
            //下标点也要随着添加高亮样式 ，  i+1 是要对应色块
            $('.cur-box > a').eq(i+1).addClass('active').siblings().removeClass('active');
            i++; if (i == 3 ) { 
                //首先要将全部的色块都显示了，不然就没有显示隐藏的效果了
                $('.slider-item').css('display','block');
                //当i大于色块数目，重新变为0
                i=0;
                //衔接下标点跳到 1 中去
                $('.cur-box > a').eq(i).addClass('active').siblings().removeClass('active');
             console.log(i);
            }
           }, 2000);
       }
    
       showTime();
        //初始的时候 下标 1 显示    
       $('.cur-box > a').eq(0).addClass('active').siblings().removeClass('active');
       aClick();
    })

这个是简单版的，有需要的自己去优化，封装。