美文网首页
图片轮播

图片轮播

作者: 47号同学 | 来源:发表于2016-04-04 20:09 被阅读173次

图片轮播

图片轮播在APP中的使用常见度就不用多说。此demon主要使用到UIScrollView,NSTimer。当开始拖动UIScrollView时,NSTimer暂停使用;当UIScrollView结束拖动,NSTimer开始启动。

1初始化轮播图片

设置图片轮播

CGFloat imageW = self.imageScrollView.frame.size.width;
CGFloat imageH = self.imageScrollView.frame.size.height;
CGFloat imageY = 0;
//设置图片
for(int i = 0;i<5;i++)
{
    UIImageView *imageView = [[UIImageView alloc]init];

    CGFloat imageX = imageW * i;

    imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);

    NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];

    imageView.image = [UIImage imageNamed:name];

    [self.imageScrollView addSubview:imageView];
2设置UIScrollView滑动范围(不可缺少,否则不可以拖动)及一些属性

设置内容尺寸

CGFloat contentW = 5 * imageW;
self.imageScrollView.contentSize = CGSizeMake(contentW, 0);

//分页
self.imageScrollView.pagingEnabled = YES;

//去掉橡皮条

self.imageScrollView.showsHorizontalScrollIndicator = NO;

值得注意的时,如果设置了拖动范围后依然不可以多动,那就是Atuo Layout搞得鬼,这时候应该取消使用。

QQ20160404-0.png
3.由于UIScrollView设置为分页显示,所以使用UIPageControl来控制显示

设置圆点个数

self.pageConctrol.numberOfPages = 5;
4.APP启动完成,开启定时器
[self addTimer];


/*
*  添加定时器
*/
- (void)addTimer
{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
    
}


- (void)nextImage
{
    // 1.增加pageControl的页码
    int page = 0;
    if (self.pageConctrol.currentPage == 5 - 1) {
        page = 0;
    } else {
        page = self.pageConctrol.currentPage + 1;
    }
    
    // 2.计算scrollView滚动的位置
    CGFloat offsetX = page * self.imageScrollView.frame.size.width;
    CGPoint offset = CGPointMake(offsetX, 0);
    [self.imageScrollView setContentOffset:offset animated:YES];
}

5.UIScrollView代理办法

-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{

NSLog(@"====");
// 停止定时器(一旦定时器停止了,就不能再使用)
[self removeTimer];

}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{

// 根据scrollView的滚动位置决定pageControl显示第几页
CGFloat scrollW = scrollView.frame.size.width;
int page = (scrollView.contentOffset.x + scrollW * 0.5) / scrollW;
self.pageConctrol.currentPage = page;

}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{

// 开启定时器
[self addTimer];

}

-(void)removeTimer
{

[self.timer invalidate];
self.timer = nil;

}

效果
QQ20160404-1.png

相关文章

  • 个人博客—轮播器

    个人博客—轮播器 轮播器自动轮播,每张图片淡入淡出 控制按钮和图片描述跟随图片轮播 鼠标悬停图片上方则停止轮播,滑...

  • 沉浸式渐变图片轮播器

    沉浸式渐变图片轮播器 沉浸式渐变图片轮播器

  • JQ实现左右轮播效果

    这篇文章主要是实现图片左右轮播效果,功能:进入页面自动播放图片,鼠标悬浮,暂停图片轮播,鼠标离开,继续图片轮播,点...

  • 常用三方 SDCycleScrollView轮播图

    iOS图片、文字轮播器Git/SDCycleScrollView 滚动轮播图片、文字、可使用本地图片或加载网络图片...

  • 用动画做图片轮播

    图片轮播的新方法,用动画实现轮播: 1.将需要轮播的图片用标签放在同一位置; 2.通过改变各个图片的透明度实现轮播...

  • 第三方库之 banner

    Android 广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加...

  • 27.jquery 实战-轮播

    代码 1.实现如下轮播效果 要求:渐变轮播,图片淡入淡出轮播会自动循环像左向右点击会展示前/后图片底部显示轮播当前...

  • 无限图片轮播器 --- Objective-C

    KNBannerView 无限循环轮播器:本地图片,网络图片(图片缓存) 一.功能描述及要点 1.无限图片轮播器,...

  • 轮播

    轮播的原理 滑动轮播1.轮播的图片水平排列2.给出一个与图片相同大小的视窗包裹图片列,设置overflow: hi...

  • iOS高效图片轮播 - 两个imageView实现

    iOS高效图片轮播 - 两个imageView实现 iOS高效图片轮播 - 两个imageView实现

网友评论

      本文标题: 图片轮播

      本文链接:https://www.haomeiwen.com/subject/iotplttx.html