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

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

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

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

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大于色块数目，重新变为0i=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();
})

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