1、跑马灯之图片循环滚动

本文主要是介绍1、跑马灯之图片循环滚动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近，公司做了好几个项目，第一个项目首页跑马灯的效果是我们亲爱滴组长同学写的，后面跑马灯的需求改变了而组长同学又搞别的路去了，于是把我叫了过去，组长很亲切滴对我讲，I am very busy, Robert同学你来搞一下这个跑马灯效果。我很happy的接过了这个任务，不就几张图片滑啊滑么，我觉得应该very easy! 谁知道原来这竟然是个very large坑，从修改了第一个项目的跑马灯效果之后，我就成了跑马灯效果的专业户了，之后公司所有项目的跑马灯效果都成了我的菜了，而且更他妈的蛋疼的是每个跑马灯的效果和功能都不一样，在不断的升级，我也是彻底的醉了。没想到一个简单的跑马灯效果，在我宽大的温暖的手指经历了很多个版本的成长。现在，项目忙完了，可以总结一下了，顺便分享给各位开发的同学么～～～

一、功能需求

1、能够显示图片和文字；

2、图片滑至最后一张能又能从第一张开始(图片循环)；

3、图片能自动滑；(定时器)

二、功能实现

1、除开要实现图片循环之外，其他的还是挺easy滴，其实，图片循环也不难，只是需要一个小小的算法。比如，你数组里有三张图片，你要实现三张图片循环，那么你就要设置五张图片。为什么要五张图片呢？？？其实原理是这样滴：4-[1-2-3]-0。很呆逼的想法吧，但是可以实现你想要的效果。好吧，我知道你嫌我太罗嗦了，简单粗暴点，上代码。。。那我就把代码全部贴出来了。

2、头文件(.h)里面是这样写滴：

#import <UIKit/UIKit.h>@interface ViewController : UIViewController<UIScrollViewDelegate>@property (retain, nonatomic) UIPageControl *pageControl;
@property (retain, nonatomic) UIScrollView *scrollView;
@property (retain, nonatomic) NSArray *arrPhotos;@end

3、源文件(.m)里面是这样写滴：

#import "ViewController.h"


@interface ViewController ()@end@implementation ViewController
@synthesize pageControl;
@synthesize scrollView;
@synthesize arrPhotos;- (void)viewDidLoad {[super viewDidLoad];arrPhotos = [[NSArray alloc]initWithObjects:@"001.jpg",@"002.jpg",@"003.jpg", nil];[NSTimer scheduledTimerWithTimeInterval:3.0f target:self selector:@selector(timeTurnPage) userInfo:nil repeats:YES]; //启用定时器[self paoMaDengDemo]; //调用跑马灯的方法
}//实现跑马灯效果的方法
- (void)paoMaDengDemo {scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 300)];scrollView.delegate = self;scrollView.showsHorizontalScrollIndicator = NO;scrollView.showsVerticalScrollIndicator = NO;scrollView.contentSize = CGSizeMake(arrPhotos.count*self.view.frame.size.width, 300);scrollView.pagingEnabled = YES;[self.view addSubview:scrollView];for (int i=0; i<arrPhotos.count; i++ ){UIView *view = [[UIView alloc]initWithFrame:CGRectMake((i+1)*scrollView.frame.size.width, 0,scrollView.frame.size.width, scrollView.frame.size.height)]; //创建序号从 1 到 数组＋1 的view[scrollView addSubview:view];UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, scrollView.frame.size.width, 25)];label.text = [NSString stringWithFormat:@"这是第%d张图片",i+1];label.textAlignment = NSTextAlignmentCenter;[view addSubview:label];UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 25, scrollView.frame.size.width, scrollView.frame.size.height)];imageView.image = [UIImage imageNamed:[arrPhotos objectAtIndex:i]];[view addSubview:imageView];}//图片循环的原理：3-[1-2-3]-1//创建序号为0的view 取数组第一张图片UIView *viewFirst = [[UIView alloc]initWithFrame:CGRectMake(scrollView.frame.size.width*(arrPhotos.count+1), 0, scrollView.frame.size.width, scrollView.frame.size.width)];[scrollView addSubview:viewFirst];UILabel *labelFirst = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, scrollView.frame.size.width, 25)];labelFirst.text = [NSString stringWithFormat:@"这是第%ld张图片",arrPhotos.count];labelFirst.textAlignment = NSTextAlignmentCenter;[viewFirst addSubview:labelFirst];UIImageView *imageViewFirst = [[UIImageView alloc]initWithFrame:CGRectMake(0, 25, scrollView.frame.size.width, scrollView.frame.size.height)];imageViewFirst.image = [UIImage imageNamed:[arrPhotos objectAtIndex:0]];[viewFirst addSubview:imageViewFirst];//创建序号为 数组＋1 的view 取数组最后一张图片UIView *viewEnd = [[UIView alloc]initWithFrame:CGRectMake(0, 0, scrollView.frame.size.width, scrollView.frame.size.width)];[scrollView addSubview:viewEnd];UILabel *labelEnd = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, scrollView.frame.size.width, 25)];labelEnd.text = [NSString stringWithFormat:@"这是第1张图片"];labelEnd.textAlignment = NSTextAlignmentCenter;[viewEnd addSubview:labelEnd];UIImageView *imageViewEnd = [[UIImageView alloc]initWithFrame:CGRectMake(0, 25, scrollView.frame.size.width, scrollView.frame.size.height)];imageViewEnd.image = [UIImage imageNamed:[arrPhotos objectAtIndex:arrPhotos.count-1]];[scrollView addSubview:imageViewEnd];scrollView.contentSize = CGSizeMake(scrollView.frame.size.width*(arrPhotos.count+2), scrollView.frame.size.height); //设置scrollview可滑动的范围为 数组＋2 个长度[scrollView scrollRectToVisible:CGRectMake(scrollView.frame.size.width, 0, scrollView.frame.size.width, scrollView.frame.size.height) animated:YES]; //将scrollview设置从第一页开始显示pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, scrollView.frame.size.height-20, self.view.frame.size.width, 20)];pageControl.backgroundColor = [UIColor clearColor];pageControl.pageIndicatorTintColor = [UIColor grayColor];pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];pageControl.numberOfPages = [arrPhotos count];pageControl.currentPage = 0;[self.view addSubview:pageControl];
}//定时器方法
- (void)timeTurnPage {int currentPage = self.scrollView.contentOffset.x / self.scrollView.frame.size.width;currentPage ++;if (currentPage > arrPhotos.count){currentPage = 0;[self.scrollView scrollRectToVisible:CGRectMake(self.scrollView.frame.size.width*currentPage, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height) animated:NO];}else {[self.scrollView scrollRectToVisible:CGRectMake(self.scrollView.frame.size.width*currentPage, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height) animated:YES];}pageControl.currentPage = currentPage;
}#pragma mark - UIScrollView Delegate- (void)scrollViewDidScroll:(UIScrollView *)sender {int page = scrollView.contentOffset.x / scrollView.frame.size.width;page -- ;pageControl.currentPage = page;}- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{int currentPage = self.scrollView.contentOffset.x / self.scrollView.frame.size.width;if (currentPage==0){[self.scrollView scrollRectToVisible:CGRectMake(self.scrollView.frame.size.width * [arrPhotos count],0,self.scrollView.frame.size.width,self.scrollView.frame.size.height) animated:NO]; // 序号0显示最后一页}else if (currentPage==([arrPhotos count]+1)){[self.scrollView scrollRectToVisible:CGRectMake(self.scrollView.frame.size.width, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height) animated:NO]; //序号 数组＋1 显示第一页}
}@end</span><span style="font-size: 11px;">
</span>

4、怎么样？只要思路理清了还是挺easy滴吧，最后我们再来看看效果图；