var mySwiper1 = new Swiper('.my-swiper', { autoplay: 5000,//可选选项，自动滑动 speed: 1000, grabCursor : true, prevButton:'.swiper-button-prev', nextButton:'.swiper-button-next', loop : true, pagination : '.my-page',//分页器所在容器 paginationClickable :true,//分页器可控制swiper切换 paginationType: 'custom',//自定义 //自定义分页方法 paginationCustomRender: function (swiper, current, total) { var text = ['登录注册','筛选译员','预约译员','确认付款']var oImg = [11,22,33,44]var nImg = [1,2,3,4]// console.log(text)var _html = ''for (var i = 1i <= totali++) { if (current == i) { //激活状态下 _html += '<li class="swiper-pagination-custom active"><p>'+text[i-1]+'</p></li>'}else{ //未激活状态下 _html += '<li class="swiper-pagination-custom"><p>'+text[i-1]+'</p></li>'} } return _html//返回所有的页码html } })
//给每个页码绑定跳转的事件 $('.my-page').on('click','li',function(){ var index = $(this).index()console.log(index)//切换到指定slide mySwiper1.slideTo(index+1, 1000, false)//切换到第一个slide，速度为1秒 })
1、首先需要打开HBuilderX开发工具，创建一个Web项目，并将swiper插件对应的CSS和JavaScript文件拷贝到项目中。
2、然后新建一个静态页面，然后将swiper插件的文件引入到页面中。
3、接着在<body></body>标签中，插入多个div标签并设置class属性。
4、利用类选择器和伪类选择器nth-child，设置几个div标签的样式。
5、调用jquery初始化函数，对swiper插件进行初始化，设置autoplay属性。
6、最后保存代码并运行项目，打开浏览器查看界面效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）