结合Swiper 插件,实现一个比较简易的利用鼠标的滑动和点击事件来控制上下屏滑动切换的效果。
在Google浏览器测试没有问题,在其他浏览器中,鼠标滚动切换事件出现了可能和Swiper插件冲突的情况,所以后来做了简单的效果处理。基本上满足需要。
需求:需要做一个产品的宣传页,为了效果,需要有屏幕上下切换的效果,所以选择了Swiper插件来帮助实现。
选择Swiper的模板
实现的部分效果截图

实现方案:(主要讲鼠标滚动和点击来控制屏幕滑动)
我们在做类似轮播图的时候,都会根据轮播图的数量在轮播图区域的下方的中间区域生成一个表示滑动到哪个页码的pagination。

2.1 生成导航条
根据pagination的数量和Index,我们把相应的导航条内容进行赋值。
function $(id) {

最低0.47元/天 解锁文章
2744

被折叠的 条评论
为什么被折叠?



