iOS 幻灯片的自动循环滚动

浏览数：106 / 时间：2015年06月11日

首先，我说一下思路，自动滚动的实现是通过定时器进行实现的。当然，考虑到我们在定时循环的时候可能有进行手动滑动，所以我们就要根据

pageControl的当前定点进行判断。

而循环滚动是通过对幻灯片中image多加2进行实现的。

假如你幻灯片中有5个元素需要循环：

[0, 1, 2, 3, 4]

那么你在将这四个元素添加到UIScrollView里面的时候，就需要多添加两个，变成这样：

[ 4, 0, 1, 2, 3, 4, 0 ]

然后只需要在scrollViewDidEndDecelerating代理方法里判断offset是第一个和最后一个

int offset = sv.contentOffset.x / 320;

当offset == 0或者等于最后一个的时候，你setContentOffset到相应元素即可

例如，当offset==0，setContentOffset到第四个元素即可，记着animated设为NO。

好了，思路讲好了，下面是具体代码

在scrView中添加显示出来的图片，以及在图片上添加点击手势

for (int i = 0; i < arrBanner.count; i++) { //-------------------在scrView中添加图片 UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(320*(i + 1), 0, 320, 120)]; NSDictionary *DicBanner = [arrBanner objectAtIndex:i]; self.model = [[BaseJsonModel alloc] initWithDataDic:DicBanner]; NSString *StrBanner = [NSString stringWithFormat:@"http://app2.jzh.cn/%@",_model.Banner_pic]; NSURL *BannerUrl = [NSURL URLWithString:StrBanner]; // UIImage *imgBanner = [UIImage imageWithData:[NSData dataWithContentsOfURL:BannerUrl]]; [imgView setImageWithURL:BannerUrl placeholderImage:nil]; [self.scrView addSubview:imgView]; //--------------------在图片上添加手势 imgView.userInteractionEnabled = YES; imgView.tag = 100 +i; UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dissertation:)]; [imgView addGestureRecognizer:tapGesture]; [tapGesture release]; }

scrView中添加预留的imageView

 1     // 取数组最后一张图片 放在第0页
 2     NSDictionary *DicBanLast = [arrBanner objectAtIndex:arrBanner.count-1];
 3     NSString *LastImg = [DicBanLast objectForKey:@"baner_pic"];
 4     NSString *BannerLast = [NSString stringWithFormat:@"http://app2.jzh.cn/%@",LastImg];
 5     NSURL *BannerLastUrl = [NSURL URLWithString:BannerLast];
 6     UIImageView *imageView = [[UIImageView alloc] init];
 7     [imageView setImageWithURL:BannerLastUrl placeholderImage:nil];
 8     NSLog(@"%@",LastImg);
 9     imageView.frame = CGRectMake(0, 0, 320, 120); // 添加最后1页在首页 循环
10     [self.scrView addSubview:imageView];
11     // 取数组第一张图片 放在最后1页
12     NSDictionary *DicBanFirst = [arrBanner objectAtIndex:0];
13     NSString *FirstImg = [DicBanFirst objectForKey:@"baner_pic"];
14     NSString *BannerFirst = [NSString stringWithFormat:@"http://app2.jzh.cn/%@",FirstImg];
15     NSURL *BannerFirstUrl = [NSURL URLWithString:BannerFirst];
16     imageView = [[UIImageView alloc] init];
17     [imageView setImageWithURL:BannerFirstUrl placeholderImage:nil];
18     imageView.frame = CGRectMake((320 * (arrBanner.count + 1)) , 0, 320, 120); // 添加第1页在最后 循环
19     [self.scrView addSubview:imageView];
20     
21     [self.scrView setContentSize:CGSizeMake(320 * (arrBanner.count + 2), 120)]; //  +上第1页和第4页  原理：4-[1-2-3-4]-1
22     [self.scrView setContentOffset:CGPointMake(0, 0)];
23     [self.scrView scrollRectToVisible:CGRectMake(320,0,320,120) animated:NO]; // 默认从序号1位置放第1页 ，序号0位置位置放第4页

UIPageControl

    self.pageControl.numberOfPages = arrBanner.count;
    self.pageControl.currentPage = 0;

    [self.pageControl addTarget:self action:@selector(turnPage) forControlEvents:UIControlEventValueChanged];

1 - (void)turnPage
2 {
3     int page = self.pageControl.currentPage;
4     [self.scrView scrollRectToVisible:CGRectMake(320*(page+1),0,320,120) animated:NO];
5 }

定时器添加循环事件

1     // 定时器 循环
2     [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(runTimePage) userInfo:nil repeats:YES];

1 - (void)runTimePage
2 {
3     int page = self.pageControl.currentPage; // 获取当前的page
4     page++;
5     page = page > arrBanner.count-1 ? 0 : page ;
6     self.pageControl.currentPage = page;
7     [self turnPage];
8 }

scrView代理的实现

 1 #pragma  mark - ScrollViewDelegate
 2 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
 3 {
 4     CGFloat pagewidth = self.scrView.frame.size.width;
 5     int page = floor((self.scrView.contentOffset.x - pagewidth/(arrBanner.count+2))/pagewidth)+1;
 6     page --;  // 默认从第二页开始
 7     self.pageControl.currentPage = page;
 8 }
 9 // 减速停止
10 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
11 {
12     CGFloat pagewidth = self.scrView.frame.size.width;
13 
14     int currentPage = floor((self.scrView.contentOffset.x - pagewidth/ (arrBanner.count+2)) / pagewidth) + 1;
15     //    int currentPage_ = (int)self.scrollView.contentOffset.x/320; // 和上面两行效果一样
16     //    NSLog(@"currentPage_==%d",currentPage_);
17     if (currentPage==0)
18     {
19         [self.scrView scrollRectToVisible:CGRectMake(320 * arrBanner.count,0,320,120) animated:NO]; // 序号0 最后1页
20     }
21     else if (currentPage==(arrBanner.count+1))
22     {
23         [self.scrView scrollRectToVisible:CGRectMake(320,0,320,120) animated:NO]; // 最后+1,循环第1页
24     }
25 
26 }