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">