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)
        
    }

本代码参考 http://www.hangge.com/blog/cache/detail_1314.html 修改而来，详情请参考 Swift - 图片循环轮播组件的实现