异形滚动轮播图---jquery实现

效果图：

点击左右轮播按钮，实现图片滚动

第一种实现方式

列表li列表头部和尾部放置一个节点：

1. 首先获取元素集合及位置集合【每个号码牌的定位width,height,left,top信息】放到json中

2. 然后在右按钮点击后，将元素集合头元素移至尾部，然后根据位置集合对应每个元素重新渲染位置，就会出现移动的效果

3. 但是这个问题是当10号码牌移动到尾部时，会出现穿透效果，也就是10会平移到9的位置上

4. 解决办法：当新位置为0的时，将display设为none,然后让其运动到尾部，再在animate()函数回调函数上，将元素display:block就可以了。

for (var i = 0; i < arr.length; i++) {if (i == 0) {arr[i].css("display", "none").animate(SEAT[i], function() {$(this).css("display", "block");});} else {arr[i].animate(SEAT[i]);}
}

左按钮类似，不再赘述。

第二种方案

如果头部不让放一个预置节点，如图：

在点击右按钮下，将新位置为0的元素隐藏然后运动在左侧虚拟位置，元素显示，然后进行动画，将元素从虚拟位置移动到0的位置上，代码如下：

for (var i = 0; i < arr.length; i++) {if (i == 0) {arr[i].css({"width": 70,"height": 50,"left": -120,"right": 50}).animate(SEAT[i]);} else {arr[i].animate(SEAT[i]);}
}

先让最后一个节点设置到虚拟头节点，然后进行动画移动到0的位置。

点击左按钮，将当前0节点【变为最后一个节点】动画到虚拟头节点位置，然后设置样式到最后即可

for (var i = 0; i < arr.length; i++) {if (i == 10) {arr[i].animate({"width": 70,"height": 50,"left": -120,"right": 50}, function() {arr[10].css(SEAT[10]);});} else {arr[i].animate(SEAT[i]);}
}

回调函数中无法获取最新的index值，所以以上代码使用固定变量获取，也可以通过IIFE解决：

if (i == 10) {(function() {var a = i;arr[i].animate({"width": 70,"height": 50,"left": -120,"right": 50}, function () {arr[a].css(SEAT[a]);});})(i);
} else {arr[i].animate(SEAT[i]);
}

最后吐槽一个csdn这个编辑器，是真的烂

异形滚动轮播图---jquery实现相关推荐

原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
JS经典案例-无缝滚动轮播图（纯JS）
滚动轮播图在JS初级阶段,轮播图是最基础最经典的案例,而相比于渐变轮播图,无缝滚动轮播图又要更难一点.渐变轮播图仅需要使用到点击事件.定时器等,而无缝滚动轮播图则需要考虑到第一张>最后一张, ...
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...
html5移动轮播图,简单的支持移动设备的轮播图jQuery插件
这是一款简单的支持移动设备的轮播图jQuery插件.该jQuery轮播图插件采用响应式设计,支持自动轮播,圆点导航和箭头导航,以及CSS3过渡动画效果等. 使用方法在页面引入jquery,slide ...
Swift 4 无限滚动轮播图(UICollectionView实现)
作为一个资深(自认为)iOS程序猿,会经常用到轮播图,但是总是感觉自己实现要比直接用别人的要方便一点,并且有一些需求需要深度定制,于是想着自己封装一个可以定制化的轮播图库JCyclePictureVi ...
手机html轮播图,jquery支持移动手机的响应式轮播图插件
这是一款支持移动手机的响应式jquery轮播图插件.它具有跨平台,响应式,支持移动设备等特点,并且在使用CSS3制作过渡动画,效果非常炫酷. 使用方法在页面中引入jquery,hammer.min. ...
HTML圆形立体感轮播图,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
原生js实现触摸滚动轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...