美文网首页
三张图片实现无限轮播

三张图片实现无限轮播

作者: 被吹落的风 | 来源:发表于2017-08-01 15:46 被阅读21次

    简单描述一下原理

    原理其实很简单,只需往scrollerView上放三个imageView即可,初始化时,调整contentOffset,让第二个imageView居中(位于当前屏幕),第一个imageView显示第6张图片(假设是6张),第二个imageView显示第一张图片,第三个imageView显示第二张图片,当手向右滑动时,此时当前屏幕显示的是第6张图片,当滑动动画停止后(代理函数里有),瞬间改变图片(第一个imageView显示第5张图片,第二个imageView显示第6张图片,第三个imageView显示第1张图片),同时改变contentOffset(依然让第二个imageView居中,显示在当前屏幕中),手势向左滑动时同理。

    来吧!开整吧!!猿类们都爱用代码说话!!!

    • 初始化了一个图片数组,然后是scrollerView的高度,每页的宽度
     view_WIDTH = Double(self.view.frame.width);
     view_HEIGHT = 220.0
     imagesArray = [UIImage.init(named: "James0.jpg")!,UIImage.init(named: "James1.jpg")!,UIImage.init(named: "James2.jpg")!,UIImage.init(named: "James3.jpg")!,UIImage.init(named: "James4.jpg")!,UIImage.init(named: "James5.jpg")!]
    
    • 初始化scrollerView
    func loadScrollerView() -> Void {
            
            scrollerView = UIScrollView.init(frame: CGRect.init(x: 0.0, y: 64.0, width: view_WIDTH, height: view_HEIGHT))
            scrollerView.backgroundColor = UIColor.orange
            scrollerView.contentSize = CGSize.init(width: view_WIDTH * 3, height: 0)
            scrollerView.showsVerticalScrollIndicator = false
            scrollerView.showsHorizontalScrollIndicator = false
            scrollerView.isPagingEnabled = true
            scrollerView.bounces = true
            scrollerView.contentOffset = CGPoint.init(x: view_WIDTH, y: 0)
            scrollerView.delegate = self;
            self.view.addSubview(scrollerView)
    
            imageViewArray = NSMutableArray.init()
            
            for i in 0...2
            {
                let imageView = UIImageView.init()
                imageView.frame = CGRect.init(x: view_WIDTH * Double(i), y: 0.0, width: view_WIDTH, height: view_HEIGHT)
                imageView.contentMode = UIViewContentMode.scaleAspectFill
                imageView.isUserInteractionEnabled = true
                imageView.tag = (5 + i)%6
                print(imageView.tag)
                imageView.image = imagesArray[imageView.tag]
                scrollerView.addSubview(imageView)
                imageViewArray.add(imageView)
                
                let tapGesture = UITapGestureRecognizer.init(target: self, action: #selector(imageViewClicked))
                imageView.addGestureRecognizer(tapGesture)
            }
            
            pageControl = UIPageControl.init(frame: CGRect.init(x: 0.0, y: Double(scrollerView.frame.maxY - 30), width: view_WIDTH, height: 30.0))
            pageControl.numberOfPages = 6
            pageControl.currentPage = 0
            self.view.addSubview(pageControl)
    }
    
    • 重新改变图片和contentOffset
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
            self.updateImageViewsAndPageControl()
    }
        
    func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
            self.updateImageViewsAndPageControl()
    }
    
    func updateImageViewsAndPageControl() -> Void {
            
            var flag = NSInteger()
            if scrollerView.contentOffset.x > CGFloat(view_WIDTH)
            {
                flag = 1
            }
            else if scrollerView.contentOffset.x == 0.0
            {
                flag = -1
            }
            else
            {
                return
            }
            
            for x in 0..<imageViewArray.count
            {
                let imageView:UIImageView = imageViewArray[x] as! UIImageView
                var index = imageView.tag + flag;
                if index < 0
                {
                    index = pageControl.numberOfPages - 1
                }
                else if index >= pageControl.numberOfPages
                {
                    index = 0
                }
                imageView.tag = index
                imageView.image = imagesArray[imageView.tag]
            }
            
            let currentImgView:UIImageView = imageViewArray[1] as! UIImageView
            pageControl.currentPage = currentImgView.tag
            
            scrollerView.contentOffset = CGPoint.init(x: view_WIDTH, y: 0)
    }
    

    相关文章

      网友评论

          本文标题:三张图片实现无限轮播

          本文链接:https://www.haomeiwen.com/subject/nnfjlxtx.html