结合Swiper插件,实现定制化的PC端鼠标滑动和点击控制屏幕切换

结合Swiper 插件,实现一个比较简易的利用鼠标的滑动和点击事件来控制上下屏滑动切换的效果。

在Google浏览器测试没有问题,在其他浏览器中,鼠标滚动切换事件出现了可能和Swiper插件冲突的情况,所以后来做了简单的效果处理。基本上满足需要。

需求:需要做一个产品的宣传页,为了效果,需要有屏幕上下切换的效果,所以选择了Swiper插件来帮助实现。

选择Swiper的模板
这里写图片描述
实现的部分效果截图
这里写图片描述
这里写图片描述

实现方案:(主要讲鼠标滚动和点击来控制屏幕滑动)

我们在做类似轮播图的时候,都会根据轮播图的数量在轮播图区域的下方的中间区域生成一个表示滑动到哪个页码的pagination。
这里写图片描述 这里写图片描述

2.1 生成导航条

根据pagination的数量和Index,我们把相应的导航条内容进行赋值。

function $(id) {
   
   
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值