轮播图

作者: 墨染倾 | 来源:发表于2016-07-14 01:01 被阅读0次

//

//  ViewController.m

//  轮播图

//

//  Created by lanou on 16/7/13.

//  Copyright © 2016年 lanou. All rights reserved.

//

#import "ViewController.h"

@interface ViewController ()

#define screenWidth [UIScreen mainScreen].bounds.size.width

#define screenHeight [UIScreen mainScreen].bounds.size.height

@property(nonatomic,strong)UIPageControl *pageControl;

//滑动视图UIScrollView,自带了可滑动功能

@property(nonatomic,strong)UIScrollView *scrollView;

@end

@implementation ViewController

- (void)viewDidLoad {

   [super viewDidLoad];

//    创建初始化滑动视图

//    [UIScreen mainScreen].bounds包含了屏幕尺寸

   self.scrollView=[[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];

   for (NSInteger i=0; i<6; i++) {

//    根据i循环创建UIImageView,再添加到滑动视图scrollView上面

       UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(i*screenWidth,0,screenWidth,screenHeight)];

       NSString *imageName=nil;

       if (i==5) {

           imageName=@"1.jpg";

       }else{

           imageName=[NSString stringWithFormat:@"%ld.jpg",i+1];

       }

//        加载响应的图片

       UIImage *image=[UIImage imageNamed:imageName];

//        设置图片

       imageView.image=image;

//        将imageView添加到滑动视图上

       [self.scrollView addSubview:imageView];

   }

//    添加滑动视图到屏幕上

   [self.view addSubview:self.scrollView];

//    设置滑动视图的滑动区域contentSize

   self.scrollView.contentSize=CGSizeMake(6*screenWidth, screenHeight);

//    整屏翻转

   self.scrollView.pagingEnabled=YES;

//    边界回弹

   self.scrollView.bounces=YES;

//    设置代理,代理是负责监听滑动视图整个滑动过程的

   self.scrollView.delegate=self;

//    开启一个定时器

//    TimeInterval:时间间隔

//    每隔一定的时间隔,target会去执行selector这个方法

//    [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(turnToNextImage) userInfo:(nil) repeats:YES];

   self.pageControl=[[UIPageControl alloc]initWithFrame:CGRectMake(80, 500, 150, 20)];

   self.pageControl.numberOfPages=5;

   [self.view addSubview:self.pageControl];

   }

//定时器触发的方法:跳转到下一张图片

-(void)turnToNextImage

{

//    先获取当前图片是第几张

   NSInteger index=self.scrollView.contentOffset.x/screenWidth;

//    跳转到下一张(设置偏移量)

   [self.scrollView setContentOffset:CGPointMake((index+1)*screenWidth, 0) animated:YES];

}

//滑动视图滑动的时候调用

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

//    contentOffset是访问到了滑动视图的偏移量,包含了x和y轴的偏移量

//    setContentOffset:animated:

//    NSLog(@"offset.x=%f,offset.y=%f",scrollView.contentOffset.x,scrollView.contentOffset.y);

}

//scrollView结束减速(停止)

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

// 判断是否为最后一张

   NSInteger index=scrollView.contentOffset.x/screenWidth;

//    5表示最后一张图片,如果是最后一张图片就切换到第0张图片(设置偏移量为0,0)

   if (index==5) {

       [scrollView setContentOffset:CGPointMake(0, 0) animated:YES];

       self.pageControl.currentPage=0;

   }else{

       self.pageControl.currentPage=index;

   }

}

//滑动结束的时候调用

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView

{

//    先获取当前下标

   NSInteger index=scrollView.contentOffset.x/screenWidth;

//    是最后一张就设置偏移量为0,0

   if (index==5) {

       [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];

       self.pageControl.currentPage=0;

   }else{

       self.pageControl.currentPage=index;

   }

}

- (void)didReceiveMemoryWarning {

   [super didReceiveMemoryWarning];

   // Dispose of any resources that can be recreated.

}

@end

相关文章

  • 无标题文章

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色,各有用处。 1.传统轮播图 第一步...

  • 轮播图

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步,得到元素 第二步,设置...

  • 现金红包

    每日红包 轮播图 详情图 周末红包 轮播图 详情图 圣诞红包 轮播图 详情图

  • day7_作业

    轮播图1 轮播图2

  • [iOS]定制性强的广告轮播图--SCAdView

    @[无限轮播图] @[3D轮播图] @[广告轮播图] SCAdView Statement If my code ...

  • 普通奖品

    卡西欧小方块 轮播图 详情图 三只松鼠大礼包 轮播图 详情图 天猫精灵 轮播图 详情图 小米蓝牙无线耳机 轮播图 ...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • 多轮播图的设计

    列表展示多个轮播图 多个轮播图同时显示 多个轮播图不定时进行轮播动画 对应呈现的关系:1个TableView、一个...

网友评论

      本文标题:轮播图

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