zoukankan      html  css  js  c++  java
  • Carousel 旋转画廊特效的疑难杂症

    疑难杂症

    该画廊特效的特点就是前后元素有层级关系。

    我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程。不知道这个插件的原型是哪个,有知道的朋友可以告诉我。

    该插件相对完美,但是实际在项目中使用时却发现了一个令人头疼的bug。如果图片只有三张,旋转过度时会出现如下的交叉紊乱(没发现的多试几次)。

    See the Pen carousel by Zongbin Niu (@nzbin) on CodePen.

    分析一下代码会发现,主要是第一个元素的 z-index 问题。当前图片获取的是前一张或者后一张的 z-index 值,所以第一个元素在相同 z-index 的情况下会被遮挡。道理很简单,关键是解决办法。起初我希望在原有插件的基础上通过小改动,解决这个不大不小的bug。事实证明很困难。当然也可能是自己太笨,想不到更好的解决办法。至少应该改变一下思路。

    类似插件

    我试图寻找类似的插件,想看看别人的处理方法,但令人遗憾的是,大多数类似特效如果只有3张图片时也会出现奇怪问题。最终还是找到了几款非常优秀的旋转画廊插件。

    1.roundabout.js

    官网:http://demo.niutuku.com/js/20/3/

    See the Pen roundabout by Zongbin Niu (@nzbin) on CodePen.

    roundabout这个插件的优秀之处无需多言,不过轮播效果还是有点不太一样,看看下面这个插件!

    2.featureCarousel.js

    官网:http://www.bkosborne.com/jquery-feature-carousel

    See the Pen featureCarousel by Zongbin Niu (@nzbin) on CodePen.

    这个效果与我需要的效果完全一样,会不会carousel就是以这个插件为原型的呢?

    作者还有一个类似的插件,主要是配置参数有些区别,就不上传示例了,感兴趣的可以看官网

    http://www.bkosborne.com/jquery-waterwheel-carousel

  • 相关阅读:
    Contains Duplicate III
    Contains Duplicate
    bitmap
    机器人的运动范围
    矩阵中的路径
    不要62
    牛顿迭代法求方程的根
    统计C语言合法字符
    迭代法求平方根
    欧几里德算法(求两个正整数的最大公约数)
  • 原文地址:https://www.cnblogs.com/nzbin/p/5782333.html
Copyright © 2011-2022 走看看