服务热线 400-660-8066
天津网站建设
在一些前端项目中需要做滑动按钮，比如滑动切换模式之类的，如图：
在PC端上，鼠标拖动滑块一次切换不同的模式，用js自己写比较麻烦，我想到了一个简单有效的办法，用swiper轮播插件来写简单快速。Swiper轮播插件是非常强大的，前端工作人员一定不陌生，如果你不了解可以去官网看看API，你会发现它不仅仅只局限于表面的轮播功能。
首先在页面引入jquery和swiper插件，然后是编写html代码如图：
在这里有3种不同的模式要切换，就要用到5个swiper-slide，如图所示在第1个swiper-lisde中设置标签属性data-index=2，第2个swiper-lisde中设置标签属性data-index=1，第3个swiper-lisde中设置标签属性data-index=0，同时第三个swiper-slide设置滑块背景图片，其余的空白。Css在这里就不多说了。
Siwpe轮播插件有自带的API，如图：
如图所示，slidesPerView：3，：设置slider容器能够同时显示的slides数量，在这里设置为3，initialSlide：2，：设置为2后，Swiper初始化时activeSlide成了第三个。因为要滑动后对应上的不同模式，就需要用到swiper的回调函数onSlideChangeEnd，这时就要用到标签属性值了（data-index），滑块成功滑动一次swiper-slide-active的位置会发生改变，获取的标签属性值也会不同。根据获取的值的不同分别添加和删除选中状态的类名（on），这样一个滑动按钮初步就成了。但在实际测试过程中，会出现回调函数不成功的情况，经过多次测试和研究需要用到crossFade：true（过度效果结束触发），这样滑动按钮就完成了。
中企动力专注于高端网站建设，为上市公司、中大型企业集团提供网站定制、小程序定务，欢迎客户咨询我们的建站热线400-660-8066
添加动力小姐姐微信
电话咨询
400-660-8066
