美文网首页
3个imageView实现轮播图

3个imageView实现轮播图

作者: 云天涯丶 | 来源:发表于2018-06-05 16:46 被阅读18次
撸了一个轮播图,已上传github(今天github提交好慢,微软你干了什么。。。) → 传送门
使用方法:

1、导入头文件 #import "YCarouselView.h"

2、

NSArray *a = @[@"1.jpg",@"2.jpg",@"3.jpg",@"4.jpg",@"5.jpg",@"6.jpg",@"7.jpg",@"8.jpg",@"9.jpg"];
YCarouselView *c = [[YCarouselView alloc] initWithFrame:CGRectMake(0, 100, kScreenWidth, 200) localImages:a];
[self.view addSubview:c];

功能:

1、支持定时轮播
2、支持手动滑动
3、支持点击图片链接

重点:

1、给UIImageView赋值

// 赋值
- (void)setupCurrentValue{

    NSInteger tc = self.imageArray.count;

    if (self.isUrlImage) {
        [self.middleImgV sd_setImageWithURL:[NSURL URLWithString:self.imageArray[_curIndex]] placeholderImage:nil options:SDWebImageRetryFailed];
        [self.leftImgV sd_setImageWithURL:[NSURL URLWithString:self.imageArray[(tc - 1 + _curIndex)%tc]] placeholderImage:nil options:SDWebImageRetryFailed];
        [self.rightImgV sd_setImageWithURL:[NSURL URLWithString:self.imageArray[(tc + 1 + _curIndex)%tc]] placeholderImage:nil options:SDWebImageRetryFailed];

    } else {
        // 看图片放在哪,一般都是Assets.xcassets
        self.middleImgV.image = [UIImage imageNamed:self.imageArray[_curIndex]];
        self.leftImgV.image = [UIImage imageNamed:self.imageArray[(tc - 1 + _curIndex)%tc]];
        self.rightImgV.image = [UIImage imageNamed:self.imageArray[(tc + 1 + _curIndex)%tc]];
    }

}

2、计算当前index及设置scrollView的contentOffset

// 算法逻辑
- (void)slidingAlgorithmWithRight:(BOOL)right animation:(BOOL)animation{
    if (right) {
        if (self.curIndex >= self.imageArray.count - 1) {
            self.curIndex = 0;
        } else {
            self.curIndex ++;
        }

        /*
         设置setContentOffset:animated:/contentOffset不触发scrollViewDidEndDecelerating代理
         */
        if (animation) {
            [UIView animateWithDuration:AnimateDuration delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
                self.scrollView.contentOffset = CGPointMake(kScreenWidth*2, 0);
            } completion:^(BOOL finished) {
                [self setupCurrentValue];
                self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
            }];
        } else {
            self.scrollView.contentOffset = CGPointMake(kScreenWidth*2, 0);
            [self setupCurrentValue];
            self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
        }

    } else{

        if (self.curIndex <= 0) {
            self.curIndex = self.imageArray.count - 1;
        } else {
            self.curIndex --;
        }

        if (animation) {
            [UIView animateWithDuration:AnimateDuration delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
                self.scrollView.contentOffset = CGPointMake(0, 0);
            } completion:^(BOOL finished) {
                [self setupCurrentValue];
                self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
            }];
        } else {
            self.scrollView.contentOffset = CGPointMake(0, 0);
            [self setupCurrentValue];
            self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
        }

    }
    self.pageControl.currentPage = _curIndex;
}

相关文章

  • iOS高效图片轮播 - 两个imageView实现

    iOS高效图片轮播 - 两个imageView实现 iOS高效图片轮播 - 两个imageView实现

  • iOS无限轮播图 无限复用

    关于轮播图的实现, zz所了解到的有三种: 利用scrollView根据轮播图片的多少来创建imageview 然...

  • 2018-03-08

    Android自定义HorizontalScrollView和ImageView实现不一样的轮播图效果 需求效果 ...

  • 3个imageView实现轮播图

    撸了一个轮播图,已上传github(今天github提交好慢,微软你干了什么。。。) → 传送门 使用方法: 1...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • 两个ImageView实现轮播图

    1. 轮播图有用CollectionView实现的,如SDCycleScrollView github地址:htt...

  • 轮播图实现

    轮播图在实际应用开发使用较多,本文说明一下具体的实现过程。 一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...

  • swift UICollectionView 实现无限轮播图

    无线轮播图的实现方式有很多,这里介绍如何通过 UICollectionView 实现无线轮播图.效果图如下: 具体...

  • swift轮播图的实现-UIScrollView

    目标 :UIScrollView+三UIImageView的轮播图实现 原理:利用UIScrollView实现轮播...

  • Android BannerView封装学习

    BannerView 相信每个Android开发的小伙伴都做过轮播图,ViewPager加ImageView再加上...

网友评论

      本文标题:3个imageView实现轮播图

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