用jq撸一个简易轮播图

本次文章我将来用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 = 0
        var 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 = i
            goIndex()
        })

希望大家可以留下见解，喜欢本篇文章的一键三连(●'◡'●)