代码地址如下:
http://www.demodashi.com/demo/11959.html

ImageCarousel

简单封装的图片轮播器

内存过大由于我加载的图片分辨率较高(4k)

文件目录

使用

初始化自定义view,并提供title和图片数组,设置控制器代理

shufflingView *myView = [[shufflingView alloc]
initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width,
230)]; NSArray *picDataArray = @[ @"1", @"2", @"3", @"4", @"5" ];
NSArray *titleDataArray = @[ @"1", @"2", @"3", @"4", @"5" ]; myView.picDataArray = [picDataArray copy]; myView.titleDataArray = [titleDataArray copy]; myView.titleLabelTextColor =
[UIColor colorWithRed:255/255 green:0 blue:0 alpha:1.0]; myView.isAutomaticScroll = YES; myView.automaticScrollDelay = 2; myView.carouselViewStyle = ImageCarouselStyleBoth; myView.pageIndicatorTintColor = [UIColor colorWithRed:255/255 green:0/255 blue:255/255 alpha:1.0]; myView.pageControlCurrentColor =
[UIColor colorWithRed:0/255 green:255/255 blue:255/255 alpha:1.0]; myView.delegate = self; myView.picDataArray = [picDataArray copy]; [self.view addSubview:myView];

自定义view


typedef NS_ENUM(NSInteger, ImageCarouselStyleType) {
ImageCarouselStyleNone,
ImageCarouselStyleTitle,
ImageCarouselStylePageControl,
ImageCarouselStyleBoth
};
@protocol CarouselViewDelegate <NSObject> @optional - (void)didClick:(NSInteger)index; @end @interface shufflingView : UIView
{
float _automaticScrollDelay;
ImageCarouselStyleType _carouselViewStyle;
}
@property(nonatomic, strong) NSArray *picDataArray;
@property(nonatomic, strong) NSArray *titleDataArray;
@property(nonatomic, weak) UIFont *titleLabelTextFont;
@property(nonatomic, weak) UIColor *titleLabelTextColor;
@property(nonatomic, weak) UIColor *pageIndicatorTintColor;
@property(nonatomic, weak) UIColor *pageControlCurrentColor; // 是否自动滚动
@property(nonatomic, assign) BOOL isAutomaticScroll;
// 滚动时间间隔
@property(nonatomic, assign) float automaticScrollDelay;
/// 枚举
@property(nonatomic, assign) ImageCarouselStyleType carouselViewStyle; @property(nonatomic, weak) id<CarouselViewDelegate> delegate;

采用一个scrollivew和三个imageview

// 默认滚动到中间imageview
[_mainScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0)
animated:NO]; // 添加三个imageView
_leftImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, KViewW, KViewH)];
_rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(2*KViewW, 0, KViewW, KViewH)]; _centerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(KViewW, 0, KViewW, KViewH)];
_centerImageView.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]
initWithTarget:self
action:@selector(scrollViewClick:)]; [_centerImageView addGestureRecognizer:tap]; [self.mainScrollView addSubview:_leftImageView];
[self.mainScrollView addSubview:_rightImageView];
[self.mainScrollView addSubview:_centerImageView];

核心代码

根据scrollview的偏移量来计算当前位于的imageView。然后重置左右两个image的图片

	#pragma mark - 无限滚动核心
- (void)reloadImageViews {
// 获取当前offset
CGPoint scrollViewOffset = [_mainScrollView contentOffset];
// 如果当前位于centerImageView
if (scrollViewOffset.x == 2 * _mainScrollView.bounds.size.width) {
if (_currentImageIndex == kImageCount - 1) {
_currentImageIndex = 0;
}else { _currentImageIndex = (_currentImageIndex +1) % kImageCount;
} } else if (scrollViewOffset.x == 0) {
if (_currentImageIndex == 0) {
_currentImageIndex = kImageCount - 1;
}else { _currentImageIndex = (_currentImageIndex -1) % kImageCount;
} } _centerImageView.image =
[UIImage imageNamed:_picDataArray[self.currentImageIndex]]; // 重新设置左右图片
_leftImageView.image =
[UIImage imageNamed:_picDataArray[self.leftImageIndex]]; _rightImageView.image =
[UIImage imageNamed:_picDataArray[self.rightImageIndex]]; _titleLabel.text = _titleDataArray[self.currentImageIndex];
_pageControl.currentPage = self.currentImageIndex; }

滚动过程中调整pageControl

	// MARK: - 滚动过程中
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint scrollViewOffset = scrollView.contentOffset; if (scrollViewOffset.x > 1.5 * _mainScrollView.bounds.size.width) { _pageControl.currentPage = self.rightImageIndex; _titleLabel.text = _titleDataArray[self.rightImageIndex]; } else if (scrollViewOffset.x < 0.5 * _mainScrollView.bounds.size.width) { _pageControl.currentPage = self.leftImageIndex; _titleLabel.text = _titleDataArray[self.leftImageIndex];
} else {
_pageControl.currentPage = self.currentImageIndex; _titleLabel.text = _titleDataArray[self.currentImageIndex];
}
}

效果

ios图片轮播效果

代码地址如下:
http://www.demodashi.com/demo/11959.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

ios图片轮播效果的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. iOS 图片轮播图(自动滚动)

    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...

  3. IOS 图片轮播实现原理 (三图)

    IOS 图片轮播实现原理的一种 图片轮播所要实现的是在一个显示区域内通过滑动来展示不同的图片. 当图片较少时我们可以采用在滚动视图上添加很多张图片来实现. 但是如果图片数量较多时,一次性加载过多图片会 ...

  4. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  5. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  6. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  7. JQ 实现轮播图(3D旋转图片轮播效果)

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  8. axure 动态面板实现图片轮播效果(淘宝)

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料   axure7.0 方法/步骤     下载需要轮播的图片   将图片引入至axure中,将引入的第一张图片转为 ...

  9. WPF3D图片轮播效果

    原文:WPF3D图片轮播效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/68059169 ...

随机推荐

  1. nodejs使用fetch获取WebAPI

    在上一篇<Nodejs获取Azure Active Directory AccessToken>中,已经获取到了accessToken,现时需要获取WebAPI的数据,选择了node-fe ...

  2. windows 下配置浏览器使用 kerberos

    最近 hadoop 一系列软件都给加上了 kerberos 认证,整体来说还算顺利,各组件也都继续正常工作,唯独 storm ui,个天杀的在 windows 上打不开. HTTP ERROR: 40 ...

  3. Windows7 SP1旗舰版精简版最终版本

    2016年6月9号,老毛子@lopatkin大神针对Win7 SP1旗舰版精简版进行了最终更新,此次主要是之前小问题的修复和调整.该版为Windows 7 SP1 简体中文旗舰版最新版,包含2016年 ...

  4. E - A strange lift 【数值型BFS+上下方向】

    There is a strange lift.The lift can stop can at every floor as you want, and there is a number Ki(0 ...

  5. MySql笔记之数据表

    数据表:行称为记录  列称为字段 用来存储数据 一.数据类型 数据类型是指列.存储过程参数.表达式和局部变量的数据特征,它决定了数据的存储格式,代表了不同的信息类型. 在我们存储不同类型的数据时,为了 ...

  6. (转) C#解惑:HashSet<T>类

    HashSet<T>是一个相对“冷门”的类型,平时在项目中用得不多,但是在特定的业务中可以大用. 先来了解下HashSet<T>类,主要被设计用来存储集合,做高性能集运算,例如 ...

  7. sshkey改变后出错的解决

    错误态 ssh 192.168.111.200 出现如下错误 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING ...

  8. luogu P1186 玛丽卡

    题目描述 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道从一个城市到另一个城 ...

  9. 【bzoj1455】【罗马游戏】左偏树+并查集(模板)

    Description 罗马皇帝很喜欢玩杀人游戏. 他的军队里面有n个人,每个人都是一个独立的团.最近举行了一次平面几何测试,每个人都得到了一个分数. 皇帝很喜欢平面几何,他对那些得分很低的人嗤之以鼻 ...

  10. [JOISC2017]細長い屋敷

    题目大意: $n(n\le5\times10^5)$个房间排成一排,相邻两个房间之间有一扇门,第$i$个房间和第$i+1$个房间之间的门可以用第$c_i$种钥匙打开(可能有多个门可以用同一种钥匙打开) ...