cocos2dx 3.3 scrollView lua 版本幻灯片效果

----- 需求

1.实现很多网站的图片左右循环滚动效果

2.当手移动到上面的时候，自动滑动暂停一段时间

3.当手在图片上移动一段距离的时候，图片跟随翻页（一次切一张图片）。

---- 思路

1. 利用 cocosstudio 拼好界面 生成csb 文件

2. 利用table 表固定好数据格式（可以 策划 excel 生成方便热更新）

3. scrollview 加载每张图片 ，启一个定时器没隔一段时间 scrollview 滑动一张图片的距离

4. 注意scrollview 的算法 (innerContanerSize().width - getContentSize().width) 滑动的总长度

5. 处理边缘情况

6. scrollview 注册点击事件并作相应的处理

第一次发表文章，小白献丑了。。。

轻喷,。。。欢迎大神指正。

local SlideDialog = class("SlideDialog",function ()<span style="white-space:pre"></span>return require("Dialog"):create()end)function SlideDialog:ctor()<span style="white-space:pre"></span>self._strName = "SlideDialog"<span style="white-space:pre"></span>self._pCloseButton = nil <span style="white-space:pre"></span>self._pCCS = nil <span style="white-space:pre"></span>self._pBg = nil<span style="white-space:pre"></span>self._pGoBtn = nil<span style="white-space:pre"></span>self._pImgPageView = nil <span style="white-space:pre"></span>self._pPageIndexImg = nil <span style="white-space:pre"></span>-----------------------------<span style="white-space:pre"></span>-- 当前选中的活动类型<span style="white-space:pre"></span>self._nCurActivityType = 0<span style="white-space:pre"></span>-- 代表页数的小点(页数)<span style="white-space:pre"></span>self._tPageIndexImgs = {}<span style="white-space:pre"></span>-- 自动翻页的定时器<span style="white-space:pre"></span>self._pSchedulerEntry = nil <span style="white-space:pre"></span>-- 当前页数<span style="white-space:pre"></span>self._curPageIndex = 1<span style="white-space:pre"></span>-- 每一页的宽度<span style="white-space:pre"></span>self._nRenderWidth = 500<span style="white-space:pre"></span>-- 点击之后延时<span style="white-space:pre"></span>self._nDelaySec = 0endfunction SlideDialog:create()<span style="white-space:pre"></span>local dialog = SlideDialog.new()<span style="white-space:pre"></span>dialog:dispose()<span style="white-space:pre"></span>return dialogendfunction SlideDialog:dispose()<span style="white-space:pre"></span>-- add plist <span style="white-space:pre"></span>ResPlistManager:getInstance():addSpriteFrames("AdvertiseMent.plist")<span style="white-space:pre"></span>ResPlistManager:getInstance():addSpriteFrames("AdvertiseMentPic.plist")<span style="white-space:pre"></span>local function onNodeEvent(event)<span style="white-space:pre"></span>if event == "cleanup" then <span style="white-space:pre"></span>self:onExitSlideDialog()<span style="white-space:pre"></span>end<span style="white-space:pre"></span>end    <span style="white-space:pre"></span>self:registerScriptHandler(onNodeEvent)    <span style="white-space:pre"></span>self:initUI()    <span style="white-space:pre"></span>self:changePageIndex(1)endfunction SlideDialog:initUI()

<span style="white-space:pre"></span>-- 加载 cocostudio 生成的csb文件（单独写在一个脚本文件里面）<span style="white-space:pre"></span>local params = require("AdvertiseMentParams"):create()<span style="white-space:pre"></span>self._pCCS = params._pCCS<span style="white-space:pre"></span>self._pBg = params._pBackGround<span style="white-space:pre"></span>self._pCloseButton = params._pCloseButton<span style="white-space:pre"></span>self._pImgPageView = params._pPictureQ<span style="white-space:pre"></span>self._pGoBtn = params._pOkButton<span style="white-space:pre"></span>self._pPageIndexImg = params._pNowButton<span style="white-space:pre"></span>self._tPageIndexImgs[1] = self._pPageIndexImg<span style="white-space:pre"></span>self:disposeCSB()<span style="white-space:pre"></span>-- 加载广告图片<span style="white-space:pre"></span>self._pageNum =  #TableAdvertiseMent<span style="white-space:pre"></span>local s = self._pImgPageView:getInnerContainerSize()<span style="white-space:pre"></span>local contentWidth = 0

<span style="font-size: 14px; white-space: pre;"></span><span style="font-size: 14px;">-- </span><span style="font-family: 'Microsoft YaHei';"><span style="font-size:10px;">TableAdvertiseMent 本地的lua 表 定义图片对应的信息方便热更新</span></span><span style="font-size: 14px;"></span><span style="font-size: 14px;"></span><span style="font-size: 14px; white-space: pre;"></span><span style="font-size: 14px;">for i,advertiseInfo in ipairs(TableAdvertiseMent) do</span><span style="font-size: 14px; white-space: pre;"></span><span style="font-size: 14px;">local adImg = cc.Sprite:createWithSpriteFrameName("AdvertiseMentPic/"..advertiseInfo.ResourcesName..".png")</span><span style="font-size: 14px; white-space: pre;"></span><span style="font-size: 14px;">contentWidth = contentWidth + self._nRenderWidth </span><span style="font-size: 14px; white-space: pre;"></span><span style="font-size: 14px;">adImg:setAnchorPoint(cc.p(1, 0.5))</span><span style="font-size: 14px; white-space: pre;"></span><span style="font-size: 14px;">adImg:setPosition(cc.p(contentWidth,s.height/2))</span><span style="font-size: 14px; white-space: pre;"></span><span style="font-size: 14px;">self._pImgPageView:addChild(adImg)</span><span style="font-size: 14px; white-space: pre;"></span><span style="font-size: 14px;">end<span style="white-space:pre"></span>if contentWidth > s.width then        <span style="white-space:pre"></span>self._pImgPageView:setInnerContainerSize(cc.size(contentWidth,s.height))<span style="white-space:pre"></span>end<span style="white-space:pre"></span>s = self._pImgPageView:getInnerContainerSize()    <span style="white-space:pre"></span>local gapX = self._pPageIndexImg:getContentSize().width    <span style="white-space:pre"></span>-- 加载对应按钮    <span style="white-space:pre"></span>for i = 1, #TableAdvertiseMent do    <span style="white-space:pre"></span>if i == 1 then     <span style="white-space:pre"></span>self._tPageIndexImgs[1]:setVisible(true)    <span style="white-space:pre"></span>end    <span style="white-space:pre"></span>self._tPageIndexImgs[i] = self._pPageIndexImg:clone()    <span style="white-space:pre"></span>self._tPageIndexImgs[i]:setPositionX(self._tPageIndexImgs[i]:getPositionX() + gapX *( i - 1))   <span style="white-space:pre"></span>self._pBg:addChild(self._tPageIndexImgs[i])    <span style="white-space:pre"></span>end    <span style="white-space:pre"></span>-- 幻灯片特效    <span style="white-space:pre"></span>local function slideAni ()    <span style="white-space:pre"></span>if self._nDelaySec > 0 then     <span style="white-space:pre"></span>self._nDelaySec = self._nDelaySec - 1   <span style="white-space:pre"></span>return    <span style="white-space:pre"></span>end    <span style="white-space:pre"></span>self:changePageIndex(self._curPageIndex + 1)   <span style="white-space:pre"></span> end    <span style="white-space:pre"></span>self._pSchedulerEntry = cc.Director:getInstance():getScheduler():scheduleScriptFunc(slideAni,1.0,false)       <span style="white-space:pre"></span>self:initTouchEvent()endfunction SlideDialog:changePageIndex(index)   if index == self._pageNum + 1 then       self._pImgPageView:jumpToLeft()      self._tPageIndexImgs[1]:loadTexture("AdvertiseMentRes/Button002.png",ccui.TextureResType.plistType)      self._tPageIndexImgs[self._pageNum]:loadTexture("AdvertiseMentRes/button001.png",ccui.TextureResType.plistType)      self._curPageIndex = 1      return   else</span>

<span style="font-size: 14px;">      -- 此处写的时候比较纠结 scrollview 的滑动算法看一下源码就知道了      local percent = (index - 1) / (self._pageNum - 1)      self._pImgPageView:scrollToPercentHorizontal(math.floor(percent * 100),0.5,false)      self._curPageIndex = index   end   for i,v in ipairs(self._tPageIndexImgs) do       local imgName = "AdvertiseMentRes/button001.png"       if i == index then             imgName = "AdvertiseMentRes/Button002.png"       end      v:loadTexture(imgName,ccui.TextureResType.plistType)   endendfunction SlideDialog:initTouchEvent()     -- 触摸注册    local function onTouchBegin(touch,event)        --local location = touch:getLocation()       self._nDelaySec = 3        return true    end    local function onTouchMoved(touch,event)    <span style="white-space:pre"></span>self._nDelaySec = 3    end    local function onTouchEnded(touch,event)       self._nDelaySec = 3        local startLocationX = touch:getStartLocation().x        local locationX = touch:getLocation().x        if math.abs(locationX - startLocationX) >= 100 then             if locationX - startLocationX < 0 then  --表示向左滑动                if self._curPageIndex ~= self._pageNum then                    self._curPageIndex = self._curPageIndex + 1                else                    self._curPageIndex = 1                end        else                 if self._curPageIndex == 1 then                     self._curPageIndex = self._pageNum                else                    self._curPageIndex = self._curPageIndex - 1                end            end            self:changePageIndex(self._curPageIndex)        end    end    local function onTouchCancelled(touch,event)    <span style="white-space:pre"></span>self._nDelaySec = 3    end    -- 添加监听器    self._pTouchListener = cc.EventListenerTouchOneByOne:create()    self._pTouchListener:setSwallowTouches(true)    self._pTouchListener:registerScriptHandler(onTouchBegin,cc.Handler.EVENT_TOUCH_BEGAN )    self._pTouchListener:registerScriptHandler(onTouchMoved,cc.Handler.EVENT_TOUCH_MOVED )    self._pTouchListener:registerScriptHandler(onTouchEnded,cc.Handler.EVENT_TOUCH_ENDED )    self._pTouchListener:registerScriptHandler(onTouchCancelled,cc.Handler.EVENT_TOUCH_CANCELLED )        self:getEventDispatcher():addEventListenerWithSceneGraphPriority(self._pTouchListener, self._pImgPageView)endfunction SlideDialog:onExitSlideDialog()     self:onExitDialog()     if self._pSchedulerEntry ~= nil then        cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._pSchedulerEntry )        self._pSchedulerEntry = nil    end      ResPlistManager:getInstance():removeSpriteFrames("AdvertiseMent.plist")    ResPlistManager:getInstance():removeSpriteFrames("AdvertiseMentPic.plist") endreturn SlideDialogTableAdvertiseMent{    { ID = 1.0, ResourcesName = 'advertisement01', ActivityType = 1.0, },    { ID = 2.0, ResourcesName = 'advertisement02', ActivityType = 2.0, },    { ID = 3.0, ResourcesName = 'advertisement03', ActivityType = 3.0, },}</span>