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滴吧，最后我们再来看看效果图；

源码下载地址：http://download.csdn.net/detail/u010545480/8426117