用jq撸一个简易轮播图

weixin_50968382

于 2022-03-24 16:27:00 发布

阅读量275

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_50968382/article/details/123713604

版权

本文通过jQuery实现了一个简单的轮播图。采用position: absolute让元素叠加并利用z-index切换显示，通过全局index跟踪当前显示项。内容包括HTML结构、CSS样式和JavaScript逻辑，涉及点击按钮和小圆点导航的交互功能。

摘要由CSDN通过智能技术生成

本次文章我将来用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">