使用iCarousel的旋转木马效果请求图片

简介:

使用iCarousel的旋转木马效果请求图片

https://github.com/nicklockwood/iCarousel

先看看效果:

 

 

源码如下:

//
//  RootViewController.m
//
//  Created by YouXianMing on 14-5-16.
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "iCarousel.h"
#import "YXJSON.h"
#import "YXGCD.h"
#import "SDWebImage.h"

// 数据源
#define SOURCE_DATA @"http://www.duitang.com/album/1733789/masn/p/0/50/"

@interface RootViewController ()<iCarouselDataSource, iCarouselDelegate>

@property (nonatomic, strong) iCarousel      *carousel;   // iCarousel
@property (nonatomic, strong) NSMutableArray *dataArray;  // 数据源

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 初始化数据源
    _dataArray = [[NSMutableArray alloc] init];
    
    // 初始化iCarousel
    self.carousel = [[iCarousel alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:_carousel];
    _carousel.backgroundColor = [UIColor blackColor];
    _carousel.type = iCarouselTypeWheel;
    
    // 设置代理
    self.carousel.delegate   = self;
    self.carousel.dataSource = self;
    
    
    // 异步加载数据
    [[GCDQueue globalQueue] execute:^{
        // 获取json数据
        NSData *data = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:SOURCE_DATA]];
        
        // 转换为字典
        NSDictionary *dataDic = [YXJSON dictionaryOrArrayWithJSONSData:data];
        if (dataDic)
        {
            NSArray *dataArray = dataDic[@"data"][@"blogs"];
            for (NSDictionary *dic in dataArray)
            {
                NSLog(@"%@", dic[@"isrc"]);
                
                // 存储数据
                [_dataArray addObject:dic[@"isrc"]];
            }
        }
        
        // 主线程更新
        [[GCDQueue mainQueue] execute:^{
            
            // 重新加载carousel
            [_carousel reloadData];
        }];
    }];
}

#pragma mark -
#pragma mark iCarousel methods
- (NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
    // 元素个数
    return [_dataArray count];
}

- (UIView *)carousel:(iCarousel *)carousel
  viewForItemAtIndex:(NSUInteger)index      // view的标志
         reusingView:(UIView *)view         // 重用的view
{
    if (view == nil)
    {
        view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300.0f, 400.0f)];
    }
    
    // 强行转换指针
    UIImageView *pointView = (UIImageView *)view;
    
    // 使用SDWebImage异步下载图片
    [pointView setImageWithURL:[NSURL URLWithString:_dataArray[index]]];
    
    // 图片自动适应
    pointView.contentMode = UIViewContentModeScaleAspectFit;
    
    return view;
}

- (CGFloat)carousel:(iCarousel *)carousel
     valueForOption:(iCarouselOption)option
        withDefault:(CGFloat)value
{
    if (option == iCarouselOptionSpacing)
    {
        return value * 1.1f;
    }
    
    return value;
}

@end

RootViewController.m

以下几个地方使用了本人自己封装的类,不开源,看官请自行替换相关方法-_-!

核心的地方如下:

so easy :)

 

 

问:如何实现view的点击事件?

实现协议方法 - (void)carousel:(iCarousel *)carousel didSelectItemAtIndex:(NSInteger)index; 即可

 

问:如何获取偏移量?

实现协议,然后如下使用

- (void)carouselDidScroll:(iCarousel *)carousel
{
    NSLog(@"scrollOffset %f", carousel.scrollOffset);
}

 

目录
相关文章
|
6月前
|
前端开发 JavaScript
无缝滚动图片——源码
无缝滚动图片——源码
|
6月前
|
PHP
网站三合一缩略图片介绍展示源码
网站三合一缩略图片介绍展示源码
125 3
网站三合一缩略图片介绍展示源码
|
前端开发 定位技术 API
前端切图:调用百度地图API
前端切图:调用百度地图API
63 0
|
移动开发
【笔记】一行代码完成——h5页面上滑图片渐隐
一行代码完成——h5页面上滑图片渐隐
168 0
|
JavaScript
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
148 0
|
计算机视觉
【图片操作】生成动态图片
动态图片我们使用的还是比较频繁的,平时的表情包有很多动图。今天我们要做的就是自己制作动态图片,其实就是将视频转换成动图,操作起来非常简单。下面我们就来看看如何实现吧。
577 0
|
存储 前端开发 数据安全/隐私保护
前端给页面添加暗水印的办法
前端给页面添加暗水印的办法
910 0
|
JavaScript
jquery实现的让图片在网页的可视区域里四处漂浮的效果
  本文分享给大家一个用jquery开发的图片漂浮效果。 jquery图片漂浮效果,常见的就是网页里四处漂来漂去的广告了,漂到边缘时还会反弹和拐弯。 下面来看具体的代码,先看要实现漂亮效果的这个jquery插件的源码: (function($){ $.
1647 0