EUI多图片轮播滑动效果

一、实现原理
1、EUI中Scroller组件的使用。
2、监听eui.Sroll的CHANGE_START和CHANGE_END事件；根据鼠标滑动距离，来改变视口viewport.scrollH，达到图片滑动的效果。

二、具体实现方法

1、首先新创建一个EUI组件。
2、将Scroller组件拖入到场景中，调整Scroller的尺寸与需要滚动播放的image的尺寸一致，创建两个button组件。
3、Scroller组件下有一个自带Group组件，设置Group的布局，这里我们使用水平布局HorizontalLayout，当然你也可以根据需要选择其他布局。
4、将需要滚动播放的image添加到Group中。

然后进入EUI所对应的ts脚本界面进行编辑：
1、将所需要用到的组件进行声明；
2、对scroller组件进行ui事件改变绑定；
3、对button组件进行点击事件绑定；

module gtm {
export class HuaRongDaoChoiceBattle extends eui.Component implements eui.UIComponent {private bg: eui.Image;private bg2: eui.Image;private bg3: eui.Image;private battleName: eui.Label;private bg4: eui.Image;private last: eui.Image;private next: eui.Image;private startGame: eui.Image;private lable2: eui.Label;private quit: eui.Image;private myScroller: eui.Scroller;private myGroup: eui.Group;private img1: eui.Image;private img2: eui.Image;private img3: eui.Image;private img4: eui.Image;private img5: eui.Image;/**滚动项数量*/private itemNum: number = 0;/**单个滚动项长度*/private itemSize: number;/**当前滚动到第几项 0表示第1项*/private curItemCount: number = 0;/**滚动时间*/private delayScroll: number = 250;/**触摸起始位置*/private touchStartPos: number;/**当前触摸位置和起始触摸位置距离*/private touchDist: number;/**滚动中*/private bScrolling: boolean = false;public constructor() {super();this.skinName = "HuaRongDaoBattleSkin";this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);}private onAddToStage() {this.last.visible = false;this.itemNum = this.myGroup.numChildren;this.itemSize = this.myGroup.getChildAt(0).width;this.myScroller.bounces = true;this.myScroller.throwSpeed = 0;this.myScroller.horizontalScrollBar.autoVisibility = false;this.addListener();}private addListener() {this.myScroller.addEventListener(eui.UIEvent.CHANGE_START, this.onChangStarHandle, this);this.myScroller.addEventListener(eui.UIEvent.CHANGE_END, this.onChangEndHandle, this);this.last.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onToLast, this);this.next.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onToNext, this);this.quit.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onQuit, this);this.startGame.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onChoiceBattle, this);}//拖动开始private onChangStarHandle() {//滚动条的水平坐标起始点this.touchStartPos = this.myScroller.viewport.scrollH;}//拖动结束private onChangEndHandle() {if (this.touchStartPos == -1) {return;}//dict是拖动结束后的滚动条水平坐标减去拖动前的滚动条水平坐标let dit: number = this.myScroller.viewport.scrollH - this.touchStartPos;if (dit > 0) {//播放下一个图片this.onToNext();} else if (dit < 0) {//播放上一个图片this.onToLast();}this.touchStartPos = -1;}//滑到上一项private onToLast() {let item: number = this.curItemCount;//是否是第一项if (item > 0) {item--;}this.scrollToItem(item);}//滑到下一项private onToNext() {let item: number = this.curItemCount;//是否是最后一项if (item < this.itemNum - 1) {item++;}this.scrollToItem(item);}private scrollToItem(item) {//如果是滚动中则直接跳出if (this.bScrolling) {return;}//滑动中状态this.bScrolling = true;//更新滑动到了第几项this.curItemCount = item;//先删除滚动条的动画egret.Tween.removeTweens(this.myScroller.viewport);//创建滚动条的新动画egret.Tween.get(this.myScroller.viewport).to({ scrollH: item * this.itemSize, ease: egret.Ease.quadInOut }, this.delayScroll);egret.Tween.get(this.myScroller.viewport).wait(this.delayScroll).call(() => {this.bScrolling = false;});}}private onQuit() {this.myScroller.removeEventListener(eui.UIEvent.CHANGE_START, this.onChangStarHandle, this);this.myScroller.removeEventListener(eui.UIEvent.CHANGE_END, this.onChangEndHandle, this);this.last.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onToLast, this);this.next.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onToNext, this);this.quit.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onQuit, this);this.startGame.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onChoiceBattle, this);let choic = new HuaRongDaoChoice();this.addChild(choic);if (this.parent) {this.parent.removeChild(this);}}
}

}

这样我们的单张图片滚动播放效果已经完成，接下来是多张图片滚动效果，与单张图片的基本一致，只是需要修改一下scrollToItem方法，判断最后一组图片移动的距离。

  private scrollToItem(item) {if (this.bScrolling) {return;}if (item >= 0 && item <= this.itemNum) {//滑动中状态this.bScrolling = true;/ /更新滑动到了第几项this.curItemCount = item;//先删除滚动条的动画egret.Tween.removeTweens(this.mijingpanelZYT.scroller.viewport);if (item >= 0 && item < this.itemNum) {egret.Tween.get(this.mijingpanelZYT.scroller.viewport).to({ scrollH: item * this.viewport.width, ease: egret.Ease.quadOut }, this.delayScroll);} else if (item == this.itemNum) {egret.Tween.get(this.mijingpanelZYT.scroller.viewport).to({ scrollH: this.itemMoreSize + (item - 1) * this.viewport.width, ease: egret.Ease.quadOut      }, this.delayScroll);}//创建滚动条的新动画egret.Tween.get(this.mijingpanelZYT.scroller.viewport).wait(this.delayScroll).call(() => {this.bScrolling = false;})}}

EUI多图片轮播滑动效果相关推荐

html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
layui下的图片轮播图效果代码收藏
以下展示在layui table表格列表中展示图片集,并使用layui图片轮播效果. <script> layui.use(['table', 'tree', 'layer','jquer ...
java轮播添加图片_给网站首页添加图片轮播的效果
网站的首页有图片轮播的效果,可以很好的起到广告的作用也可以起到推荐优秀内容的作用. 可是一般的建站程序,首页的幻灯片效果都很一般不是很好看,有的时候就需要我们自己改一下代码. 太复杂的代码自己改不好, ...
Android之——史上最简单图片轮播广告效果实现
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48049913 如今的Android开发需求越来越来多,实现效果越来越酷炫,很多An ...
使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果
轮播应有的功能大致都有,分享给一些在学的朋友参考学习. <!DOCTYPE html> <html> <head lang="en"><m ...
【Java小游戏】小球躲避游戏图片轮播爆炸效果、边缘反弹、计时功能
功能 Java开发的小球躲避小游戏.通过上下左右按键控制小球移动,小球移动的方向包括:横向.纵向.斜向,小球具有初始生命值.小球通过移动来躲避炮弹,当小球碰到炮弹时,产生爆炸的动画效果. 使用双缓冲方 ...
JS图片轮播切换效果实现
效果演示地址:http://6689.one/WebEffects/pictureplay.html 实现代码如下: </pre> <pre name="code" ...
TouchSlide （图片轮播的效果）
http://www.superslide2.com/TouchSlide/howToUse.html 在渠道工作系统的主页中使用了,并且(1/2/3/4)有不同的样式,具体可以参考官网案例.
unity实现图片轮播效果_Unity实现图片轮播组件
游戏中有时候会见到图片轮播的效果,那么这里就自己封装了一个,包括自动轮播.切页按钮控制.页码下标更新.滑动轮播.切页后的回调等等 . 下面,先上一个简陋的gif动态效果图从图中可以看出,该示例包括了 ...
Qt之实现图片轮播效果
一.简述今天文章讲述的是如何用Qt实现图片轮播的效果,其实我们经常在网页中看到各种广告就是使用了图片轮播,实现小区域内嵌入多个广告的效果. 下面是CSDN页面中两种常见的图片轮播效果.基本上就是定时 ...

EUI多图片轮播滑动效果

EUI多图片轮播滑动效果相关推荐

最新文章

热门文章