开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Javscript轮播 支持平滑和渐隐两种效果(可以只有两张图)

简介: 原文:Javscript轮播 支持平滑和渐隐两种效果(可以只有两张图) 先上两种轮播效果:渐隐和移动   效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4   接下来,我们来大致说下整个轮播的思路: 一、先来看简单的,移动的,先上来一个图----移动效果图: 说明:       基本原则就是顺序是按照当前显示的为基准:如当前为2,那么顺序就是2,3,4,1;如当前为3,那么顺序就是3,4,1,2。
+关注继续查看
原文:Javscript轮播 支持平滑和渐隐两种效果(可以只有两张图)

先上两种轮播效果:渐隐和移动
 
效果一:渐隐
1 2 3 4
效果二:移动
1 2 3 4

 

接下来,我们来大致说下整个轮播的思路:

一、先来看简单的,移动的,先上来一个图----移动效果图:

说明:

      基本原则就是顺序是按照当前显示的为基准:如当前为2,那么顺序就是2,3,4,1;如当前为3,那么顺序就是3,4,1,2。以此类推。

      整个移动划分为三种:1、下一个  2、上一个  3、任意个

     1、下一个:margin-left:-图宽;然后将“图1”移到最后一个位置

 

   next: function () {
            var oThis = this;
            var firstItem = oThis.itemArray.shift();
            oThis.itemArray.push(firstItem);
            rotatePrivate.clealNvActive.call(oThis, oThis.itemArray[0].index);
            //移动wrap到第二个元素
            oThis.wrap.animate({ marginLeft: -oThis.itemW }, {
                duration: oThis.actionTime,
                easing: 'easeInOutQuint',
                complete: function () {
                    //第一元素移到最后
                    oThis.wrap.append(firstItem.item);
                    oThis.wrap.css('margin-left', 0);
                    rotatePrivate.timeRun.call(oThis);
                }
            });
        },

 

 

 

      2、上一个:将最后一个(图4)移到第一个,设置margin-left:-图宽,然后动作设置成margin-left:0

 

  pre: function () {
            var oThis = this;
            //找到最后一张,并移到第一张
            var lastItem = oThis.itemArray.pop();
            oThis.wrap.prepend(lastItem.item);
            oThis.wrap.css('margin-left', -oThis.itemW);
            rotatePrivate.clealNvActive.call(oThis, lastItem.index);
            oThis.wrap.animate({ marginLeft: 0 }, {
                duration: oThis.actionTime,
                easing: 'easeInOutQuint',
                complete: function () {
                    //变化数组
                    oThis.itemArray.splice(0, 0, lastItem);
                    rotatePrivate.timeRun.call(oThis);
                }

            });
        },

 

 

 

      3、任意个:先判断向前移,还是向后移动,然后根据基本原则就是顺序是按照当前显示的为基准,从新排列顺序。

 

curstom: function (i) {
            var oThis = this;
            var customItem = null;
            for (var h in oThis.itemArray) {
                if (oThis.itemArray[h].index == i) {
                    customItem = oThis.itemArray[h];
                    break;
                }
            }
            var firstItem = oThis.itemArray[0];
            //在活动的后面
            if (customItem.index > firstItem.index) {
                //把curstomItem移到后面
                firstItem.item.after(customItem.item);
                rotatePrivate.clealNvActive.call(oThis, customItem.index);
                //foucus move to curstomitem
                oThis.wrap.animate({ marginLeft: -oThis.itemW }, {
                    duration: oThis.actionTime,
                    complete: function () {
                        //sort by customitem
                        rotatePrivate.sortItem.call(oThis, customItem);
                        oThis.wrap.css('margin-left', 0);
                        rotatePrivate.timeRun.call(oThis);
                    }
                });
            } else {
                //把curstomItem移到当前的前面,并margin-left -itemWidth
                firstItem.item.before(customItem.item);
                oThis.wrap.css('margin-left', -oThis.itemW);
                rotatePrivate.clealNvActive.call(oThis, customItem.index);
                //foucus move to curstomitem
                oThis.wrap.animate({ marginLeft: 0 }, {
                    duration: oThis.actionTime,
                    complete: function () {
                        //sort by customitem
                        rotatePrivate.sortItem.call(oThis, customItem);
                        rotatePrivate.timeRun.call(oThis);
                    }
                });
            }
        }

 

 

 

二、再来看渐隐轮播效果

这个在原来的效果上,唯一比较有亮点的就是“渐隐如何不让图片白一下”?

图1   图2  图3   图4

 

 

图1克隆

图2   图3  图4   图1

我采用clone了一张当前,并设置position: absolute;这样当当前这样的opacity变为0时,底下的图2就显示出来,这样就不那么生硬了。

 

    next: function () {
            var oThis = this;
            var firstItem = oThis.itemArray.shift();
            oThis.itemArray.push(firstItem);
            //将第一个clone一个,覆在上面
            var firstClone = firstItem.item.clone();
            firstClone.addClass('rotate-trans');
            firstClone.removeClass('rotate-item');
            oThis.wrap.append(firstClone);
            //first ele move to last
            oThis.wrap.append(firstItem.item);
            var secondItem = oThis.itemArray[0];
            rotatePrivate.clealNvActive.call(oThis, secondItem.index);
            firstClone.animate({ opacity: 0 }, {
                duration: oThis.actionTime,
                complete: function () {
                    //移走clone
                    firstClone.remove();
                    rotatePrivate.timeRun.call(oThis);
                }
            });
        },

 

 

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
NewPagedFlowView电影票卡片式无限自动轮播图方法改进
新增网络图片数据源和本地图片数据源属性 直接传入url链接数组或uiimage对象数组
0 0
案例分享:Qt多段Y轴折线图框架(双Y轴段折线、支持拽拖、浮动游标显示X值各段Y值、支持大量实时显示下位机数据)
案例分享:Qt多段Y轴折线图框架(双Y轴段折线、支持拽拖、浮动游标显示X值各段Y值、支持大量实时显示下位机数据)
0 0
【音频处理】Melodyne 网络缩放功能 ( 音符分离线 | 片段分离线 | 窗口滚动条 | 网格缩放 | 修改图像显示位置 | 显示五线谱 )
【音频处理】Melodyne 网络缩放功能 ( 音符分离线 | 片段分离线 | 窗口滚动条 | 网格缩放 | 修改图像显示位置 | 显示五线谱 )
0 0
《Quartz 2D编程指南》电子签名、图片处理(水印、裁剪以及屏幕截图)、常见图形的绘制(饼图、柱状图、雪花、手势密码、画板)
《Quartz 2D编程指南》电子签名、图片处理(水印、裁剪以及屏幕截图)、常见图形的绘制(饼图、柱状图、雪花、手势密码、画板)
0 0
ViewPager 实现 Galler 效果, 中间大图显示,两边小图展示(优化篇)
上一张效果图: 之前的项目有一个Galley的项目,但是代码结构特别乱,别问我为什么,我也是刚接手这个项目,为了方便以后阅读和维护我对一些模块进行了重构。ViewPager实现Galler效果,但是当时时间比较急,写的比较仓促,上一篇实现了简单的效果,但是对于初始的时候左边滑动是有问题的,这是因为我们在自己的Adapter的时候对于getCount,我们想通过Integer.MAX_VAL
1426 0
ArcGIS生成根据点图层生成等值面并减小栅格锯齿的操作步骤
原文:ArcGIS生成根据点图层生成等值面并减小栅格锯齿的操作步骤 一、打开ArcMAP并加载上相应的点图层和边界面图层 二、ArcToolbox--Spatial Analyst工具--差值分析--克里金法(根据不同的情况选择不同的算法,这次的处理实际上使用的是样条函数法,比其它算法更平滑,...
972 0
Sliverlight实例之 绘制扇形和环形图
原文:Sliverlight实例之 绘制扇形和环形图   未解决: 1,任意偏角,是个重点问题: (1),  另一边在弧上坐标 (2),  这个弧的弧度(ArcSegment中的Size或Angle属性) (3),  如何把这个弧度做成依赖属性配置的  2,做成一个自定义控件   有...
850 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
3D动画的菜谱式灯光与云渲染
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载