用UICollectionView实现无限轮播案列

1.自定义View

//
//  BannerView.h

#import <UIKit/UIKit.h>

@interface BannerView : UIView

/**
 *  实例化bannerView视图
 */
+ (instancetype)bannerView;

/**
 *  用来接收控制器传递的数据
 */
@property(nonatomic,strong) NSArray *banners;
@end

//
//  BannerView.m

#import "BannerView.h"
#import "BannerCell.h"

// 每一组最大的行数
#define TotalRowsInSection (5000 * self.banners.count)
#define DefaultRow (NSUInteger)(TotalRowsInSection * 0.5)

@interface BannerView() <UICollectionViewDataSource, UICollectionViewDelegate>
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (strong, nonatomic) NSTimer *timer;
@end
@implementation BannerView

+ (instancetype)bannerView
{
    //加载xib
    return [[[NSBundle mainBundle] loadNibNamed:@"BannerView" owner:nil options:nil]firstObject];
}

/**
 *  加载.nib会调用这个方法
 */
- (void)awakeFromNib
{
    //UICollectionViewCell重用cell必须注册
    [self.collectionView registerNib:[UINib nibWithNibName:@"BannerCell" bundle:nil] forCellWithReuseIdentifier:@"bannerCell"];
    
    //添加定时器
    [self addTimer];
  
}

- (void)setBanners:(NSArray *)banners
{
    _banners = banners;
    
    //1.设置pageControl的总页数
    self.pageControl.numberOfPages = self.banners.count;
    
    //2.刷新数据
    [self.collectionView reloadData];
    
    //3. 默认组
    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:DefaultRow inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}


/**
 *  移除定时器
 */
- (void)removeTimer
{
    [self.timer invalidate];
    self.timer = nil;
}

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

/**
 *  下一页
 */
- (void)next
{
    NSIndexPath *visiablePath = [[self.collectionView indexPathsForVisibleItems] firstObject];
    
    NSUInteger visiableItem = visiablePath.item;
    if ((visiablePath.item % self.banners.count)  == 0) { // 第0张图片
        [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:DefaultRow inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
        visiableItem = DefaultRow ;
    }
    
    NSUInteger nextItem = visiableItem + 1;
    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:nextItem inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];

}


#pragma mark - UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return TotalRowsInSection;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *ID = @"bannerCell";
    BannerCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    cell.model = self.banners[indexPath.item % self.banners.count];
    return cell;
}

#pragma mark - UICollectionViewDelegate
/**
 *  cell显示结束之后调用(滑动了一页)
 */
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSIndexPath *visiablePath = [[collectionView indexPathsForVisibleItems] firstObject];
    //设置pageControl的当前页
    self.pageControl.currentPage = visiablePath.item % self.banners.count;
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self removeTimer];
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self addTimer];
}

@end


2.自定义cell

//
//  BannerCell.h


#import <UIKit/UIKit.h>

@class BannerModel;
@interface BannerCell : UICollectionViewCell
/**
 *  接收banner模型数据,用于显示到cell上
 */
@property (strong, nonatomic) BannerModel *model;
@end

//
//  BannerCell.m


#import "BannerCell.h"
#import "BannerModel.h"

@interface BannerCell()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@end
@implementation BannerCell

- (void)awakeFromNib {
    // Initialization code
}

/**
 *  重写model属性,显示数据到视图上
 */
- (void)setModel:(BannerModel *)model
{
    _model = model;
    
    self.iconView.image = [UIImage imageNamed:model.icon];
}
@end

3.用到的模型

//
//  BannerModel.h

#import <Foundation/Foundation.h>

@interface BannerModel : NSObject
@property (copy, nonatomic) NSString *icon;

/** 用字典实例化对象的成员方法 */
- (instancetype)initWithDict:(NSDictionary *)dict;
/** 用字典实例化对象的类方法,又称工厂方法 */
+ (instancetype)bannerWithDict:(NSDictionary *)dict;
@end
//
//  BannerModel.m


#import "BannerModel.h"

@implementation BannerModel


/** 用字典实例化对象的成员方法 */
- (instancetype)initWithDict:(NSDictionary *)dict
{
    self = [self init];
    if (self) {
        self.icon = dict[@"icon"];
    }
    return self;
}
/** 用字典实例化对象的类方法,又称工厂方法 */
+ (instancetype)bannerWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}

@end

4.控制器使用

#import "VideoViewController.h"
#import "BannerView.h"
#import "BannerModel.h"

@interface VideoViewController ()
@property(nonatomic,strong)NSArray *banners;
@end

@implementation VideoViewController

/**
 *  懒加载 创建banner的数据模型
 */
- (NSArray *)banners
{
    if (!_banners) {
        //1.加载plist文件
        NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"newses.plist" ofType:nil]];
        
        
        NSMutableArray *arrayM = [NSMutableArray array];
        for (NSDictionary *dict in array) {
            [arrayM addObject:[BannerModel bannerWithDict:dict]];
        }
        
        _banners = arrayM;

    }
    return _banners;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    
    //self.automaticallyAdjustsScrollViewInsets = NO;
    
    //创建bannerView
    BannerView *bannerView = [BannerView bannerView];
    bannerView.banners = self.banners;
    [self.view addSubview:bannerView];
}



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用JavaScript和jQuery实现HTML无限轮播的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无限轮播</title> <style> #slider { width: 500px; height: 300px; overflow: hidden; position: relative; } #slider img { width: 500px; height: 300px; position: absolute; } #slider .btn { width: 20px; height: 20px; background-color: #fff; border-radius: 50%; position: absolute; bottom: 20px; cursor: pointer; } #slider .btn:hover { background-color: #ccc; } #slider .btn.prev { left: 20px; } #slider .btn.next { right: 20px; } </style> </head> <body> <div id="slider"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(function() { var slider = $('#slider'); var imgWidth = slider.find('img').eq(0).width(); var len = slider.find('img').length; var index = 0; var timer; // 自动轮播 function autoPlay() { timer = setInterval(function() { index++; if (index === len) { slider.css('left', 0); index = 1; } slider.animate({left: -index * imgWidth}, 500); }, 2000); } autoPlay(); // 鼠标悬停停止轮播 slider.hover(function() { clearInterval(timer); }, function() { autoPlay(); }); // 左右按钮控制轮播 slider.find('.prev').click(function() { index--; if (index === -1) { slider.css('left', -(len - 1) * imgWidth); index = len - 2; } slider.animate({left: -index * imgWidth}, 500); }); slider.find('.next').click(function() { index++; if (index === len) { slider.css('left', 0); index = 1; } slider.animate({left: -index * imgWidth}, 500); }); }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值