用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 = 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()})

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

用jq撸一个简易轮播图相关推荐

Android通过网络实现简易轮播图
先导入依赖一个Banner和一个imageloader 轮播图依赖:implementation'com.youth.banner:banner:1.4.9' 紧接着写布局 public class ...
使用js做简易轮播图，可自动
[作者注]:第一次使用js做简易轮播图首先在body里div个容器 div class="box"> <p id="p" ></p&g ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
手撸移动端轮播图（内含源码）
移动轮播图移动端轮播图与PC段轮播图,在技术选择上是有区别的,因为移动端的浏览器版本非常好,对于H5和CSS3的支持非常完美,所以很多效果可以CSS3的方式实现,比如可以使用 Transorm 属性 ...
纯css制作简易轮播图（animation、keyFrame）
主要是通过css3的动画及关键帧属性来设置图片的平移距离,以达到轮播图的效果 HTMl <body><div class="banner"><div ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
用Flutter实现一个类似于轮播图的效果
效果图: 过程脑洞自补!!! 类似于上图的效果,我们应该能想到用PageView来实现,但是思来想去,PageView官方并没有给自定义的参数,就是我们需要的下面的指示器的效果.现在我就来说下一下怎么 ...
JQ全屏居中轮播图代码
<style>.clearfloat:after{display: block;clear: both;content: "";visibility: hidden;h ...
JQ动画和特效轮播图
引用块内容 animate.css jquery-1.8.3.min.js JS中的代码 var pigs=['images/1.jpg','images/2.jpg','images/3.jpg'] ...

用jq撸一个简易轮播图

用jq撸一个简易轮播图相关推荐

最新文章

热门文章