本次文章我将来用jq实现一个轮播图，废话少说下面放效果
先说下基本思想，先将item使用position: absolute;脱离文档流令他们叠在一起，使用z-index来实现轮播的效果，注：这里如果没把每一项absolute的话是没法用z-index的，想仔细了解z-index的话可以到mdn自行查看。我们先全局设置一个index来映射item该展示哪一个，全局设置index的话，每次变化都会监视到他
先上结构，这里我有点low就直接用大于号小于号来展示button了希望大家见谅，小球容器的data-index是为了实现点击小球跳转页面展示的。
<div class="mainWarp"><ul class="list"><li class="item active">0</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li></ul><ul class="pointList"><li class="point active" data-index="0"></li><li class="point" data-index="1"></li><li class="point" data-index="2"></li><li class="point" data-index="3"></li><li class="point" data-index="4"></li></ul><button id="goPre" class="btn"><</button> <button id="goNext" class="btn">></button></div>来一些主要的css样式
.list {width: 700px;height: 300px;list-style: none;/* 叠在一起 */position: relative;padding-left: 0px;}.item {/* 叠在一起 */position: absolute;width: 100%;height: 100%;font-size: 30px;text-align: center;}按钮的样式，左右位置，以及hover效果请自行设置
.btn {position: absolute;width: 50px;height: 100px;display: block;top: 100px;cursor: pointer;background-color: rgba(255, 255, 255, 0.8);border: none;/* 防止被盖住按钮 */z-index: 10000;}
这里给item的展示项加上一个巨大的z-index
.item.active {z-index: 1000;}小圆点样式，hover效果请自行设置
.pointList {list-style: none;position: absolute;/* 居右 偏上 */right: 20px;bottom: 20px;/* 防止显示不出来 */z-index: 100000;}.point {float: left;width: 10px;height: 10px;background-color: rgba(0, 0, 0, 0.4);margin-left: 10px;border-radius: 100%;cursor: pointer;transition: all .3s;}接下来就是js部分了，实现轮播，首先引入jq，这个可以直接搜jq官网去引用，一般没什么区别
<script src="http://code.jquery.com/jquery-latest.js"></script>接下来设置全局index映射item项，并获取item元素这里的remove是jq的移除类名，addclass是添加类名，eq是选择第几个item，这里的item也是类似数组结构但不是数组，这个goIndex函数是将所有的item展示全部清空，然后再令全局变量index也就是当前item项来展示
// 实现映射// 当前图片在第几张var index = 0var item = $('.item')var goIndex = function () {item.removeClass('active')item.eq(index).addClass('active')$('.point').removeClass('active')$('.point').eq(index).addClass('active')}依旧使用定时器来设置轮播效果，这里只是通过改index的值，然后调用goindex函数进行渲染，这里到头了就令index重新为0来再次轮播
setInterval(()=>{if (index < item.length - 1) {index++} else {index = 0}goIndex()},3000)俩个btn函数来操控index，goNext同样判断以下index是否到头，到头就重新为0。goPre与之相反。这里的on就像addEventListener一样，可以查看下jq的使用
$('#goNext').on('click', function () {if (index < item.length - 1) {index++} else {index = 0}goIndex()})$('#goPre').on('click', function () {if (index > 0) {index--} else {index = item.length - 1}goIndex()})然后就是实现点击圆点跳转，这里我已经提前在html上绑定了data-index了，所以这里只用获取一下，再把其值赋给index即可
// 圆点操作$('.point').on('click', function () {// 获取data-index值// var i=$(this).data('index') //data 方法var i = $(this).attr('data-index')console.log(i)index = igoIndex()})希望大家可以留下见解，喜欢本篇文章的一键三连(●'◡'●)
