ios轮播图片用法

//
//  ZQRViewController.m
//  04-图片轮播器
//
//  Created by apple on 17-08-24.
//  Copyright (c) 2017年 zzqqrr. All rights reserved.
//

#define ZQRImageCount 5

#import "ZQRViewController.h"

@interface ZQRViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
/**
 *  定时器
 */
@property (nonatomic, strong) NSTimer *timer;
@end

@implementation ZQRViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.scrollView.delegate=self;
    // 0.一些固定的尺寸参数
    CGFloat imageW = self.scrollView.frame.size.width;
    CGFloat imageH = self.scrollView.frame.size.height;
    CGFloat imageY = 0;

    // 1.添加5张图片到scrollView中
    for (int i = 0; i<MJImageCount; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];

        // 设置frame
        CGFloat imageX = i * imageW;
        imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);

        // 设置图片
        NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];
        imageView.image = [UIImage imageNamed:name];

        [self.scrollView addSubview:imageView];
    }

    // 2.设置内容尺寸
    CGFloat contentW = MJImageCount * imageW;
    self.scrollView.contentSize = CGSizeMake(contentW, 0);

    // 3.隐藏水平滚动条
    self.scrollView.showsHorizontalScrollIndicator = NO;

    // 4.分页
    self.scrollView.pagingEnabled = YES;
//    self.scrollView.delegate = self;

    // 5.设置pageControl的总页数
    self.pageControl.numberOfPages = MJImageCount;

    // 6.添加定时器(每隔2秒调用一次self 的nextImage方法)
    [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)removeTimer
{
    [self.timer invalidate];
    self.timer = nil;
}

- (void)nextImage
{
    // 1.增加pageControl的页码
    int page = 0;
    if (self.pageControl.currentPage == MJImageCount - 1) {
        page = 0;
    } else {
        page = self.pageControl.currentPage + 1;
    }

    // 2.计算scrollView滚动的位置
    CGFloat offsetX = page * self.scrollView.frame.size.width;
    CGPoint offset = CGPointMake(offsetX, 0);
    [self.scrollView setContentOffset:offset animated:YES];
}

#pragma mark - 代理方法
/**
 *  当scrollView正在滚动就会调用
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 根据scrollView的滚动位置决定pageControl显示第几页
    CGFloat scrollW = scrollView.frame.size.width;
    int page = (scrollView.contentOffset.x + scrollW * 0.5) / scrollW;
    self.pageControl.currentPage = page;
}

/**
 *  开始拖拽的时候调用
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 停止定时器(一旦定时器停止了,就不能再使用)
    [self removeTimer];
}

/**
 *  停止拖拽的时候调用
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    // 开启定时器
    [self addTimer];
}
@end
时间: 2024-10-09 22:08:16

ios轮播图片用法的相关文章

一步一步拆解一个简单的iOS轮播图(三图)

导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... 我第一次项目中需要使用轮播图的时候我是用的别人写好的一个轮子,那个轮播封装很多东西,包括比如可以设置pageControl的位置,可以传图片url或本地图片,缓存网络图片等等.但是我觉得没必要搞那么复杂,我喜欢简单并足够做事的东西.现在有时间便想自己把它拆解一下.看了一些简书上一些作者写的关于轮播图

SuperSlidev2.1 轮播图片和无缝滚动

SuperSlidev2.1 轮播图片和无缝滚动 使用方法点击链接:http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class="bd"><ul><li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a hr

一个html+css+js的轮播图片 -- 仅供参考

好久没打网页程序了,标签和css 之类都忘的跟空白一样,花几天时间把丢掉的东西给捡起来. 附上 html+css+js 代码 html: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3

淘宝店如何加入全屏轮播图片

淘宝店如何加入全屏轮播图片? | 浏览:5779 | 更新:2014-06-11 11:31 | 标签: 淘宝 1 2 3 4 5 分步阅读 百度经验:jingyan.baidu.com 开淘宝店的朋友,看到很多店铺有各式各样的轮播大图,很高端大气,您是否也想拥有一款属于自己的轮播图呢?今天我就交给大家如何制作全屏轮播图. 百度经验:jingyan.baidu.com 工具/原料 电脑/网络 百度经验:jingyan.baidu.com 方法/步骤 1 登录淘宝店. 登录到您的淘宝店,点击“卖家

淘宝店铺装修轮播图片上添加多个自定义链接

受朋友之托,抽了点时间研究了一下店铺装修模板,每个模板都不一样如果想实现一张轮播图片上有多个链接,在轮播的模块内必须支持自定义代码,也就是自己添加代码,我这里就不上图片了,只分析几块重要的代码. 首先我在dreamweaver生成如下代码: <img src="http://img03.taobaocdn.com/imgextra/i3/298665212/TB2pR3NaXXXXXbCXXXXXXXXXXXX_!!298665212.jpg" width="1920&

轮播图片 高效图片轮播,两个imageView实现

该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 性能好,占用内存少,轮播流畅 实际使用 我们先看demo,代码如下 运行效果 轮播实现步骤 接下来,笔者将从各方面逐一分析. 层级结构 最底层是一个UIView,上面有一个UIScrollView以及UIPageControl,scrollView上有两个UIImageView,imageView

转向移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告

刚进一家新公司,公司专做手机App的,由于公司业务太多,传统的方法开发app成本太高,每个app要开发几个版本,公司有个想法就是做webApp来代替传统app.我是才接触到webApp的美工一枚. 今天给小伙伴们分享一个好东西,webApp轮播效果,支持手机上用手左右滑动的效果,因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我就需要针对移动端的设备触摸事件做相应的轮播特效.大家可以去看下易迅的:http://m.yixun.com/t/ 和淘宝的http://m.taobao.com/

微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-dots:是否显示面板指示点 autoplay:是否自动切换 interval:自动切换时间间隔 circular:是否采用衔接滑动 duration:滑动动画时长 更多属性请查看官网 <swiper indicator-dots="{{indicatorDots}}" autopla

JQuery轮播图片效果

[目标] 制作一个有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();   //不是第一张图片的其余图片都隐藏 setInte