轮播图的实现步骤

1>.h声明属性

@interface RootView : UIView

@property (nonatomic, strong) UIScrollView *scrollView;

@property (nonatomic, strong) UIPageControl *pageControl;

2>.m实现步骤

@implementation RootView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 添加子视图
        [self addAllViews];
    }
    return self;
}

// 添加子视图
- (void)addAllViews
{
    // 布局scrollView
    // 1. 创建对象
    self.scrollView = [[UIScrollView alloc] initWithFrame:self.frame];
    // 2. 定义属性
    // 苹果4s分配的内存: 30W 5s: 80w 6s: 100;
    // 设置滚动范围
    self.scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.frame) * 7, 0);
    // 在scrollView上放上7张图片
    for (int i = 0; i < 7; i ++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.frame) * i, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];

        NSString *name = [NSString stringWithFormat:@"%d.png", i + 10];

        imageView.image = [UIImage imageNamed:name];

        // 将imageView添加到scrollView上
        [self.scrollView addSubview:imageView];

    }
    // 设置整页滑动
    self.scrollView.pagingEnabled = YES;

    // 3. 添加到父视图

    [self addSubview:self.scrollView];

    // 布局pageControl
    self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.frame) - 40, CGRectGetWidth(self.frame), 40)];
    self.pageControl.backgroundColor = [UIColor grayColor];
    // 小圆点的个数
    self.pageControl.numberOfPages = 7;
    // 当前小圆点的个数
    self.pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    // 没有被选择的小圆点
    self.pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
    [self addSubview:self.pageControl];

}

3>在ViewController里设置UIScrollView的代理Delegate和给UIPageControl添加事件

@interface RootViewController ()<UIScrollViewDelegate>
@property (nonatomic, strong) RootView *rootView;
@end

@implementation RootViewController

- (void)loadView{
    self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = self.rootView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    // 4. 设置代理
    self.rootView.scrollView.delegate = self;

    //给pageControl添加事件
    [self.rootView.pageControl addTarget:self action:@selector(pageControlClick:) forControlEvents:UIControlEventValueChanged];

    // 开始添加计时器,实现自动滚动
    [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(timeAction:) userInfo:nil repeats:YES];

}

// 实现自动滚动
- (void)timeAction:(NSTimer *)time
{
    NSLog(@"定时");
    // 获取当前pageControl(页数)
    NSInteger index = self.rootView.pageControl.currentPage;
    // 如果不是最后一页, 向后偏移一页
    if (index != self.rootView.pageControl.numberOfPages - 1) {

        index++;
    } else if (index == self.rootView.pageControl.numberOfPages - 1){
        // 如果是最后一页,跳到第一页
        index = 0;
    }
     // 通过index修改scrollView的偏移量
//    self.rootView.scrollView.contentOffset = CGPointMake(index * CGRectGetWidth(self.view.frame), 0);
    [self.rootView.scrollView setContentOffset:CGPointMake(index * CGRectGetWidth(self.view.frame), 0) animated:YES];
    self.rootView.pageControl.currentPage = index;
}

// 实现点击pageControl方法
- (void)pageControlClick:(UIPageControl *)pageControl
{

    // 小圆点位置
    NSInteger currentIndex = self.rootView.pageControl.currentPage;

//    self.rootView.scrollView.contentOffset = CGPointMake(currentIndex * self.view.frame.size.width, 0);

    [UIView animateWithDuration:0.5 animations:^{
            self.rootView.scrollView.contentOffset = CGPointMake(currentIndex * self.view.frame.size.width, 0);
    }];
}

// 实现代理方法

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 改变pageCotrol的当前显示的位置

    // 获取当前显示的位置
    CGFloat currentX = self.rootView.scrollView.contentOffset.x;
    self.rootView.pageControl.currentPage = currentX / self.view.frame.size.width;

}
时间: 2024-10-07 20:36:43

轮播图的实现步骤的相关文章

原生js实现移动端Touch轮播图的方法步骤

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 清除标签默认边距 */ body,ul,li,ol,im

蓝懿IOS学习UICollectionView实战轮播图

今天刘国斌老师讲了关于JSON数据源的获取与利用,通过微博的实战项目进行练习,获取的数据都是网络上请求的真实数据,这种方式学起来很轻松,很容易理解. 刘国斌老师把今天做的练习题UICollectionView轮播图实现功能的方法步骤都下了下来,我们学起来很方便.   实现轮播图 效果的步骤: 1.创建layout (UICollectionViewFlowLayout) 2.设置layout的方向 默认上下 3.创建UICollectionView 4.设置delegate dataSource

luffy-city 基础环境搭建(至轮播图前后台交互实现)-步骤目录

前后台基础环境搭建 以 luffy-city 的主页为例,打通了轮播图的前后台交互 前言:复习-luffy 项目技术点概括 pip 源配置 python 虚拟环境搭建 luffy 后台配置-项目创建-基本插件安装-目录重构-开发环境配置文件配置(dev.prod)-日志配置 luffy 后台配置-项目环境变量 配置-logger自定义封装与使用-异常模块封装-Response二次封装 创建数据库并分配用户权限 创建应用(app)与用户-配置 media 静态资源接口 vue 环境配置-项目创建-

AngularJS:实现轮播图效果

要实现这个功能,可以https://github.com/sroze/ngInfiniteScroll这个第三方控件实现的.实现步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(

JS-特效 ~ 01. 事件对象、offset偏移/检测、无缝滚动、自动循环轮播图

Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取元素尺寸 2. 检测盒子的宽高     事件源.offsetLeft. /. ele.offsetWidth /返回的数值没有单位,是number类型 /包括内边距.边框,不包括外边距 3. 获取定位的元素的left和top值  offsetLeft / offsetTop 如果被获取的元素没有定位

Html5如何快速在页面中写出多个轮播图效果

我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里我们就可以借助插件来实现这一功能,swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g

ScrollView(2)轮播图-点击跳转

轮播图的实现就是使用的ScrollView.它具有滑动切换功能.我们在淘宝上.新闻页看到的图片可以选择滚动的都是用ScrollView实现的.在轮播图中用到的属性有:UIPageControl .UIView.UIScrollView .UITableViewDelegate.并设置为全局变量. UIPageControl *_pageControl; UIView *_headerView; UIScrollView *_headScrollView; 用Main.storyboard直接设置

【课堂实例】轮播图

[目标] 制作一个有5张图片的轮播图 [分析] 想要制作轮播图,需要如下3个步骤: 1.页面打开之后,第一个图片显示,其余的图片,隐藏 2.图片间隔5秒轮播一次 3.传到第5个图后回到第1张 [制作] 1.页面打开之后,第一个图片显示,其余的图片,隐藏: $(“.bg”).not(“:eq(0)”).hide(); 2.间隔5秒轮播: Var i=0; $(function(){ $(“.bg”).not(“:eq(0)”).hide();   //第一张图片隐藏 setInterval(fun

React Native布局实践:开发京东客户端首页(三)——轮播图的实现

上篇文章中,我们一起构建了京东客户端的TabBar,在本文中,将继续向大家介绍京东客户端首页轮播图及其下发功能按钮的开发方法,现在就让我们开始吧! 1.相关控件调研 目前在Github开源的轮播图控件,个人认为做得比较好的,一个是react-native-swiper(https://github.com/leecade/react-native-swiper),一个是react-native-viewpager(https://github.com/race604/react-native-v