iOS轮播图的实现

//使用轮播图展示一组图片信息

//定时器  使循环

[NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(runTimePage) userInfo:nil repeats:YES];

//初始化scrollview

self.scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, 320, 200)];

self.scrollview.bounces = YES;

self.scrollview.pagingEnabled = YES;

self.scrollview.delegate = self;

self.scrollview.userInteractionEnabled = YES;

self.scrollview.showsHorizontalScrollIndicator = NO;

self.scrollview.showsVerticalScrollIndicator = NO;

[self.homeView addSubview:self.scrollview];

//初始化存放循环图片的数组

self.slideImages = [NSMutableArray array];

[self.slideImages addObject:@"1.jpg"];

[self.slideImages addObject:@"2.jpg"];

[self.slideImages addObject:@"3.jpg"];

[self.slideImages addObject:@"4.jpg"];

//初始化pageControl

self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(110,240.0,100.0,18.0)]; // 初始化mypagecontrol

[self.pageControl setCurrentPageIndicatorTintColor:[UIColor redColor]];

[self.pageControl setPageIndicatorTintColor:[UIColor blackColor]];

self.pageControl.numberOfPages = [self.slideImages count];

self.pageControl.currentPage = 0;

[self.pageControl addTarget:self action:@selector(turnPage) forControlEvents:UIControlEventValueChanged]; // 触摸mypagecontrol触发change这个方法事件

[self.homeView addSubview:self.pageControl];

// 创建四个图片 imageviewm,

for (int i = 0;i<[self.slideImages count];i++)

{

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[self.slideImages objectAtIndex:i]]];

imageView.frame = CGRectMake((320 * i) + 320, 0, 320, 190.0);

UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didClickTapGesture:)];

imageView.tag = i + 100;

imageView.userInteractionEnabled = YES;

[imageView addGestureRecognizer:tapGesture];

[self.scrollview addSubview:imageView]; // 首页是第0页,默认从第1页开始的。所以+320。。。

}

// 取数组最后一张图片 放在第0页

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[self.slideImages objectAtIndex:([self.slideImages count]-1)]]];

imageView.frame = CGRectMake(0, 0, 320, 190.0); // 添加最后1页在首页 循环

[self.scrollview addSubview:imageView];

// 取数组第一张图片 放在最后1页

imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[self.slideImages objectAtIndex:0]]];

imageView.frame = CGRectMake((320 * ([self.slideImages count] + 1)) , 0, 320, 190.0); // 添加第1页在最后 循环

[self.scrollview addSubview:imageView];

[self.scrollview setContentSize:CGSizeMake(320 * ([self.slideImages count] + 2), 190.0

)]; //  +上第1页和第4页  原理:4-[1-2-3-4]-1

[self.scrollview setContentOffset:CGPointMake(0, 0)];

[self.scrollview scrollRectToVisible:CGRectMake(320,64,320,190.0) animated:NO]; // 默认从序号1位置放第1页 ,序号0位置位置放第4页

#pragma -------------------------------轮播图-----------------------------------------

// scrollview 委托函数

- (void)scrollViewDidScroll:(UIScrollView *)sender

{

CGFloat pagewidth = self.scrollview.frame.size.width;

int page = floor((self.scrollview.contentOffset.x - pagewidth/([self.slideImages count]+2))/pagewidth)+1;

page --;  // 默认从第二页开始

self.pageControl.currentPage = page;

}

// scrollview 委托函数

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

CGFloat pagewidth = self.scrollview.frame.size.width;

int currentPage = floor((self.scrollview.contentOffset.x - pagewidth/ ([self.slideImages count]+2)) / pagewidth) + 1;

//    int currentPage_ = (int)self.scrollView.contentOffset.x/320; // 和上面两行效果一样

//    NSLog(@"currentPage_==%d",currentPage_);

if (currentPage==0)

{

[self.scrollview scrollRectToVisible:CGRectMake(320 * [self.slideImages count],64,320,190.0) animated:NO]; // 序号0 最后1页

}

else if (currentPage==([self.slideImages count]+1))

{

[self.scrollview scrollRectToVisible:CGRectMake(320,0,320,190.0) animated:NO]; // 最后+1,循环第1页

}

}

// pagecontrol 选择器的方法

- (void)turnPage

{

int page = self.pageControl.currentPage; // 获取当前的page

[self.scrollview scrollRectToVisible:CGRectMake(320*(page+1),0,320,190.0) animated:NO]; // 触摸pagecontroller那个点点 往后翻一页 +1

}

// 定时器 绑定的方法

- (void)runTimePage

{

int page = self.pageControl.currentPage; // 获取当前的page

page++;

page = page > 3 ? 0 : page ;

self.pageControl.currentPage = page;

[self turnPage];

}

//图片手势

- (void)didClickTapGesture:(UITapGestureRecognizer *)gesture

{

UIImageView * imageView = nil;

switch (gesture.view.tag) {

case 101:

imageView = (UIImageView *)[self.scrollview viewWithTag:101];

break;

case 102:

imageView = (UIImageView *)[self.scrollview viewWithTag:102];

break;

case 103:

imageView = (UIImageView *)[self.scrollview viewWithTag:103];

break;

default:

break;

}

}

时间: 2024-10-03 23:16:10

iOS轮播图的实现的相关文章

一步一步拆解一个简单的iOS轮播图(三图)

导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... 我第一次项目中需要使用轮播图的时候我是用的别人写好的一个轮子,那个轮播封装很多东西,包括比如可以设置pageControl的位置,可以传图片url或本地图片,缓存网络图片等等.但是我觉得没必要搞那么复杂,我喜欢简单并足够做事的东西.现在有时间便想自己把它拆解一下.看了一些简书上一些作者写的关于轮播图

IOS轮播图

轮播图播放的主要技术在于: cell的封装.这里采用UICollectionViewCell实现. #import <UIKit/UIKit.h> @interface CircleViewCell : UICollectionViewCell @property (nonatomic, strong) UIImage* image; @property (nonatomic, assign) NSInteger index; @end // //  CircleViewCell.m // 

移动端 触屏轮播图(完善版)

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=320,user-scalable=no" /> <title>ios 轮播图简版<

iOS: 无限循环轮播图简单封装

轮播图思路: 1.首先要有一个ScrollView和两张图片,把图片放到ScrollView上. 2.要想滚动ScrollView的宽度需设置屏宽的2倍. 3.循环滚动,当滚动到最后一张图片时,采用偏移的方法,将偏移量归零,回到第一张图片. 4.将第二张的图片上的所有值赋给第一张图片. 5.设置让它自己滚动,需添加定时器. 需要的第三方数据库:SDWebImage m.文件内: #imporst "ScrollView.h" @interface ScrollView ()<UI

【学习ios之路:UI系列】实现轮播图效果(UIImageView,UIScrollView,UIPageControl,NSTimer相结合)

实现效果,在不点击的情况下,自定滚动,点击时,停止.如下图 部分代码如下: //调用NSTimer方法,自定计时 - (void)autoScroll { self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self  selector:@selector(scrollToRight) userInfo:nil repeats:YES]; } //实现触发方法 - (void)scrollToRight { [UIVie

IOS 封装轮播图

轮播图为一种常见的方式,常用于各种网站,或者App中,当然,作为APP的启动视图也是不错的选择. 闲时封装了一个,仅供新手参考. 1.新建工程,建立轮播图类 建立一个空的工程,新建一个类,起名为Carousel,继承于UIView 2.编写Carousel类接口 1 @interface Carousel : UIView 2 typedef NS_ENUM(NSInteger,UICarouselPageType){ 3 //建立一个枚举型,来设置Carousel的样式 4 UICarouse

蓝懿IOS学习UICollectionView实战轮播图

今天刘国斌老师讲了关于JSON数据源的获取与利用,通过微博的实战项目进行练习,获取的数据都是网络上请求的真实数据,这种方式学起来很轻松,很容易理解. 刘国斌老师把今天做的练习题UICollectionView轮播图实现功能的方法步骤都下了下来,我们学起来很方便.   实现轮播图 效果的步骤: 1.创建layout (UICollectionViewFlowLayout) 2.设置layout的方向 默认上下 3.创建UICollectionView 4.设置delegate dataSource

iOS UICollectionView 实现轮播图

利用UICollectionView 实现轮播图 : 具体代码如下, 简单粗暴, : <span style="font-size:24px;">// // ViewController.m // CollectionPhotosView // // Created by 帝炎魔 on 16/5/30. // Copyright © 2016年 帝炎魔. All rights reserved. // /** * UICollectionView 实现轮播图的实现 将定时器

iOS UIScrollView 实现轮播图

利用UIScrollView实现轮播图 , 需要三个ImageView轮流切换,具体原理就不讲解了. 具体实现代码如下: <span style="font-size:24px;">// // ViewController.m // PhotosShowDemo // // Created by 帝炎魔 on 16/5/29. // Copyright © 2016年 帝炎魔. All rights reserved. // #import "ViewContro