iOS开发商品页中banner中点击查看图片

轮翻播放与查看是分开的，轮翻是是用 开源的sdcyclescrollview

这里是给出的是查看的：

//
// fullscreenshowimageview.swift
// joopic
//
// created by jianxiong li on 16/9/27.
// copyright © 2016年 joobot. all rights reserved.
//
import foundation
import uikit
//图片轮播组件代理协议
protocol fullscreenshowimageviewdelegate{
 //获取数据源
 func gallerydatasource()->[string]
 //获取内部scrollerview的宽高尺寸
 func galleryscrollerviewsize()->cgsize
 
 func hiddenforcliked(index:int)
}
//图片轮播组件控制器
class fullscreenshowimageview: uiview,uiscrollviewdelegate{
 //代理对象
 var delegate : fullscreenshowimageviewdelegate!
 
 //屏幕宽度
 let kscreenwidth = bwidth
 
 //当前展示的图片索引
 var currentindex : int = 0
 
 //数据源
 var datasource : [string]?
 
 //用于轮播的左中右三个image（不管几张图片都是这三个imageview交替使用）
 var leftimageview , middleimageview , rightimageview : uiimageview?
 
 //放置imageview的滚动视图
 var scrollerview : uiscrollview?
 
 //scrollview的宽和高
 var scrollerviewwidth : cgfloat?
 var scrollerviewheight : cgfloat?
 
 //页控制器（小圆点）
 var pagecontrol : uipagecontrol?
 
 //加载指示符（用来当iamgeview还没将图片显示出来时，显示的图片）
 var placeholderimage:uiimage!
 
 //自动滚动计时器
 var autoscrolltimer:nstimer? 
 init(frame: cgrect,delegate:fullscreenshowimageviewdelegate) {
  super.init(frame: frame)
  self.delegate = delegate
  praperaui()
 }
 required init?(coder adecoder: nscoder) {
  fatalerror("init(coder:) has not been implemented")
 }

 func praperaui() {
  
  //获取并设置scrollerview尺寸
  let size : cgsize = self.delegate.galleryscrollerviewsize()
  self.scrollerviewwidth = size.width
  self.scrollerviewheight = size.height
  
  //获取数据
  self.datasource = self.delegate.gallerydatasource()
  //设置scrollerview
  self.configurescrollerview()
  
  //设置加载指示图片
  self.configureplaceholder()
  
  //设置imageview
  self.configureimageview()
  
  //设置页控制器
  self.configurepagecontroller()
  
  //设置自动滚动计时器
  //self.configureautoscrolltimer()
  
  self.backgroundcolor = uicolor.blackcolor()
  
  self.addtapaction()
 }
  
 func addtapaction(){
  //添加组件的点击事件
  let tap = uitapgesturerecognizer(target: self,
           action: #selector(fullscreenshowimageview.handletapaction(_:)))
  self.addgesturerecognizer(tap)
 }
 
 //点击事件响应
 func handletapaction(tap:uitapgesturerecognizer)->void{
  //获取图片索引值
  self.delegate.hiddenforcliked(self.currentindex)
  self.dismissviewanimate()
 }
 
 func presentviewanimate() {
  
  let fr = self.middleimageview?.frame
  self.middleimageview?.frame = cgrect(x: fr!.origin.x, y: 22, width: fr!.width, height: fr!.height)
  uiview.animatewithduration(10, animations: {
   
   self.middleimageview?.frame = fr!
   
  }) { (_) in
   
  }
  
 }
 
 func dismissviewanimate() {
  
  let fr = self.middleimageview?.frame
  self.middleimageview?.frame = cgrect(x: fr!.origin.x, y: fr!.origin.y - statusandnavheight, width: fr!.width, height: fr!.height)
  uiview.animatewithduration(10, animations: {
   
    self.middleimageview?.frame = cgrect(x: fr!.origin.x , y: -42, width: fr!.width, height: fr!.height)
   
  }) { (_) in
   
   self.hidden = true
   self.middleimageview?.frame = fr!
  }
  
 }
 
 //设置scrollerview
 func configurescrollerview(){
  self.scrollerview = uiscrollview(frame: cgrect(x: 0,y: 0,
   width: self.scrollerviewwidth!, height: bheight))
  
  self.scrollerview?.backgroundcolor = uicolor.blackcolor()
  self.scrollerview?.delegate = self
  self.scrollerview?.contentsize = cgsize(width: self.scrollerviewwidth! * 3,
            height: bheight)
  //滚动视图内容区域向左偏移一个view的宽度
  self.scrollerview?.contentoffset = cgpoint(x: self.scrollerviewwidth!, y: 0)
  self.scrollerview?.pagingenabled = true
  self.scrollerview?.bounces = false
  self.addsubview(self.scrollerview!)
  
 }
 
 //设置加载指示图片
 func configureplaceholder(){
  //这里我使用imagehelper将文字转换成图片，作为加载指示符
  let font = uifont.systemfontofsize(17)// uifont.systemfont(ofsize: 17.0, weight: uifontweightmedium)
  let size = cgsize(width: self.scrollerviewwidth!, height: self.scrollerviewheight!)
  placeholderimage = uiimage(named: "图片加载中...")
 }
 
 //设置imageview
 func configureimageview(){
  
  self.leftimageview = uiimageview(frame: cgrect(x: 0, y: (bheight-scrollerviewheight!)/2,
   width: self.scrollerviewwidth!, height: self.scrollerviewheight!))
  
  self.middleimageview = uiimageview(frame: cgrect(x: self.scrollerviewwidth!, y: (bheight-scrollerviewheight!)/2,
   width: self.scrollerviewwidth!, height: self.scrollerviewheight! ));
  
  self.rightimageview = uiimageview(frame: cgrect(x: 2*self.scrollerviewwidth!, y: (bheight-scrollerviewheight!)/2,
   width: self.scrollerviewwidth!, height: self.scrollerviewheight!));
  self.scrollerview?.showshorizontalscrollindicator = false
  
  self.leftimageview?.contentmode = uiviewcontentmode.scaleaspectfit
  self.middleimageview?.contentmode = uiviewcontentmode.scaleaspectfit
  self.rightimageview?.contentmode = uiviewcontentmode.scaleaspectfit
  
  //设置初始时左中右三个imageview的图片（分别时数据源中最后一张，第一张，第二张图片）
  if(self.datasource?.count != 0){
   resetimageviewsource()
  }
  
  self.scrollerview?.addsubview(self.leftimageview!)
  self.scrollerview?.addsubview(self.middleimageview!)
  self.scrollerview?.addsubview(self.rightimageview!)
 }
 
 //设置页控制器
 func configurepagecontroller() {
  self.pagecontrol = uipagecontrol(frame: cgrect(x: kscreenwidth/2-60,
               y: bheight - 30, width: 120, height: 20))
  self.pagecontrol?.numberofpages = (self.datasource?.count)!
  self.pagecontrol?.userinteractionenabled = false
  self.addsubview(self.pagecontrol!)
 }
 
 //设置自动滚动计时器
 func configureautoscrolltimer() {
  //设置一个定时器，每三秒钟滚动一次
  autoscrolltimer = nstimer.scheduledtimerwithtimeinterval(3, target: self, selector: #selector(slidergallerycontroller.letitscroll), userinfo: nil, repeats: true)
 }
 
 //计时器时间一到，滚动一张图片
 func letitscroll(){
  let offset = cgpoint(x: 2*scrollerviewwidth!, y: 0)
  self.scrollerview?.setcontentoffset(offset, animated: true)
 }
 
 //每当滚动后重新设置各个imageview的图片
 func resetimageviewsource() {
  //当前显示的是第一张图片
  if self.currentindex == 0 {
   self.leftimageview?.sd_setimagewithurl(nsurl(string: self.datasource!.last!))
   self.middleimageview?.sd_setimagewithurl(nsurl(string: self.datasource!.first!))
   let rightimageindex = (self.datasource?.count)!>1 ? 1 : 0 //保护
   self.rightimageview?.sd_setimagewithurl(nsurl(string: self.datasource![rightimageindex]))
   
   
  }
   //当前显示的是最后一张图片
  else if self.currentindex == (self.datasource?.count)! - 1 {
   
   self.leftimageview?.sd_setimagewithurl(nsurl(string:self.datasource![self.currentindex-1]))
   self.middleimageview?.sd_setimagewithurl(nsurl(string: self.datasource!.last!))
   self.rightimageview?.sd_setimagewithurl(nsurl(string: self.datasource!.first!))
   
  }
   //其他情况
  else{
   
   self.leftimageview?.sd_setimagewithurl(nsurl(string:self.datasource![self.currentindex-1]))
   self.middleimageview?.sd_setimagewithurl(nsurl(string: self.datasource![self.currentindex]))
   self.rightimageview?.sd_setimagewithurl(nsurl(string: self.datasource![self.currentindex+1]))
  }
  
  //设置页控制器当前页码
  self.pagecontrol?.currentpage = self.currentindex
 }
 
 
 //scrollview滚动完毕后触发
 func scrollviewdidscroll(scrollview: uiscrollview) {
  //获取当前偏移量
  let offset = scrollview.contentoffset.x
  
  if(self.datasource?.count != 0){
   
   //如果向左滑动（显示下一张）
   if(offset >= self.scrollerviewwidth!*2){
    //还原偏移量
    scrollview.contentoffset = cgpoint(x: self.scrollerviewwidth!, y: 0)
    //视图索引+1
    self.currentindex = self.currentindex + 1
    
    if self.currentindex == self.datasource?.count {
     self.currentindex = 0
    }
   }
   
   //如果向右滑动（显示上一张）
   if(offset <= 0){
    //还原偏移量
    scrollview.contentoffset = cgpoint(x: self.scrollerviewwidth!, y: 0)
    //视图索引-1
    self.currentindex = self.currentindex - 1
    
    if self.currentindex == -1 {
     self.currentindex = (self.datasource?.count)! - 1
    }
   }
   
   //重新设置各个imageview的图片
   resetimageviewsource()
   
  }
 }
 
 //手动拖拽滚动开始
 func scrollviewwillbegindragging(scrollview: uiscrollview) {
  //使自动滚动计时器失效（防止用户手动移动图片的时候这边也在自动滚动）
  //autoscrolltimer?.invalidate()
 }
 
 //手动拖拽滚动结束
 func scrollviewdidenddragging(scrollview: uiscrollview,
         willdecelerate decelerate: bool) {
  //重新启动自动滚动计时器
  //configureautoscrolltimer()
  
 }
}

如何使用：

var slidergallery : fullscreenshowimageview!
 var bannercurrentindex:int = 0
 
 //图片轮播组件协议方法：获取内部scrollview尺寸
 func galleryscrollerviewsize() -> cgsize {
  return cgsize(width: bwidth, height: bheight/2)
 }
 
 //图片轮播组件协议方法：获取数据集合
 func gallerydatasource() -> [string] {
  return self.bannerview.imageurlstringsgroup as! [string]
 }
 
  //点击事件响应
 func hiddenforcliked(index:int){
  if(bannercurrentindex != index){
    self.bannerview.scrolltoindex(int32(index))
  }
  self.navigationcontroller?.setnavigationbarhidden(false, animated: false)
 }
 
 func showimagegallery(index:int){
  //初始化图片轮播组件
  if(slidergallery == nil){
   slidergallery = fullscreenshowimageview(frame: cgrect(x: 0, y: 0, width: bwidth,
    height: bheight),delegate:self)
   
   slidergallery.currentindex = index
   slidergallery.resetimageviewsource()
   
   //将图片轮播组件添加到当前视图
   self.view.addsubview(slidergallery)
   
  }else{
   slidergallery.currentindex = index
   slidergallery.resetimageviewsource()
   slidergallery.hidden = false
   
  }
  self.slidergallery.presentviewanimate()
  self.navigationcontroller?.setnavigationbarhidden(true, animated: false)
 }
 
 //pragma -- sdcyclescrollviewdelegate
 func cyclescrollview(cyclescrollview: sdcyclescrollview!, didselectitematindex index: int) {
  print("--------index:\(index)")
  bannercurrentindex = index
  self.showimagegallery(index)
  
 }

以上就是本次我们整理的代码全部内容，如果大家学习时候还有任何不明白的地方，可以在下方的留言区讨论，感谢你对的支持。