Swift轮播图的实现及原理

原理：

总共只用三个UIImageView，放在一个UIScrollView上。滑动后，更换前后的图片，并把ContentOffset设置成显示中间图片的数值，这样就可以无限左右滑动了。

首先赋值：显示三个image,把数据源中的第一个Image赋值在中间的UIImageView上，两边依次找到应该赋值的image。

    // 得到上一张图片的下标
    private func getLastImageIndex(indexOfCurrentImage index: Int) -> Int{
        var tempIndex = index - 1
        if tempIndex == -1 {
            return self.imageArray.count - 1
        }else{
            return tempIndex
        }
    }
    
    // 得到下一张图片的下标
    private func getNextImageIndex(indexOfCurrentImage index: Int) -> Int
    {
        var tempIndex = index + 1
        return tempIndex < self.imageArray.count ? tempIndex : 0
    }

更改数据：滑动后，把数据源中应该显示的image赋值在中间的UIImageView上，然后更改两边的UIImageView上的数据，把scrollView的contentOffset的偏移量设为显示中间图片的偏移量（赋值后肉眼根本无法分辨，但是用户又可以左右滑动了，这就造成了无限循环滑动的假象）。

Circle.gif

描述：

swift版的无限循环轮播图，可自定义时间间隔，设置本地、远端图片或混设，目前配合Kingfisher一起使用（url图片赋值ImageView和缓存）。

功能：

无限循环轮播
图片点击闭包
本地、远端图片混设
支持code、xib、storyboard调用
支持旋转
支持iPhone、iPad

运行展示图：

iPhone:

iPhone

iPad:

iPad

安装：

下载后直接把GLLoopView文件夹（里面有CircleView.swift和CircleView.xib2个文件）拉进项目中。

（因有xib文件，支持cocoapods在storyboard和xib中使用时，会报编译错误，对运行无影响，所以暂缓支持cocoapods）

pod添加kingfisher（或者其它方法）

使用方法：

xib || storyboard:

        let imageArray: [GLImageModel] = [GLImageModel("first.jpg", type: .local), GLImageModel("second.jpg", type: .local), GLImageModel("third.jpg", type: .local)]
        
        self.circleView.imageModelArray = imageArray
        self.circleView.timeInterval = 5
        self.circleView.clickCircleViewClosure = { currentIndex in
            print(currentIndex, terminator: " ");
        }

code: (能用可视化就用可视化，不要再代码创建了)

        let imageArray: [GLImageModel] = [GLImageModel("first.jpg", type: .local), GLImageModel("second.jpg", type: .local), GLImageModel("third.jpg", type: .local)]
        
        self.circleView = GLCircleView(frame: CGRect(x: 0, y: 64, width: self.view.frame.size.width, height: 200))
        self.circleView.imageModelArray = imageArray
        self.circleView.timeInterval = 5
        self.circleView.clickCircleViewClosure = { currentIndex in
            print(currentIndex, terminator: " ");
        }
        self.view.addSubview(circleView)

添加：

        let urlImageModel = GLImageModel(self.circleView.imageModelArray.count % 2 == 0 ? url1 : url2, type: .url)
        self.circleView.imageModelArray.append(urlImageModel)

demo中注释很清晰

github： swift无限自动循环轮播图

最后编辑于：2017.11.27 05:01:31