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

三张图片实现无限轮播

作者: 被吹落的风 | 来源:发表于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)
}

相关文章

  • 三张图片实现无限轮播

    简单描述一下原理 原理其实很简单,只需往scrollerView上放三个imageView即可,初始化时,调整co...

  • 轮播图

    ios美女小同事写了一个可以支持显示一张图片,两张图片左右轮播,三张以及三张以上图片无限轮播的轮子,支持加载本地图...

  • 三张Imageview实现无限图片轮播

    第一部分 原理思路 第二部分 代码部分:

  • css3实现无缝轮播图片

    实现思路: 需求: 实现三张图片无缝轮播 1: 定义一个父级div , 这个div的宽度为轮播图片元素的宽度 本文...

  • iOS 图片轮播器无限滚动的实现

    我们都知道,实现图片轮播器最主要的功能就是如何让图片能够无限轮播,本篇文章就重点讨论一下无限轮播的思路,弱化其他方...

  • 简单广告轮播demo

    思路: scrollview pageControl开启,利用三张图片实现轮播 ,始终显示中间view,通过左右滑...

  • 推荐广告位轮播开源库

    1.SDCycleScrollView: UIColloctView实现无限循环图片轮播器(推荐使用)。GitHu...

  • iscroll无限轮播

    iscroll无限轮播 无限轮播有两种实现方法,一种是遇到边界图片,滚动前先移动下一张图片的DOM节点。然而这种方...

  • 三张UIImageView实现无限轮播

    对于前端工程师来说,在开发中常需要对广告或者是一些图片进行无限轮播。 最简单的一种做法 使用一个UIScrollV...

  • 无限图片轮播器 --- Objective-C

    KNBannerView 无限循环轮播器:本地图片,网络图片(图片缓存) 一.功能描述及要点 1.无限图片轮播器,...

网友评论

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

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