美文网首页
三张Imageview实现无限图片轮播

三张Imageview实现无限图片轮播

作者: 西门丨不吹雪 | 来源:发表于2016-08-02 10:34 被阅读26次

第一部分 原理思路

原理图1
原理图2
原理图3

第二部分 代码部分:

#import "ViewController.h"
#define kImageCount 4
[@interface](http://my.oschina.net/u/996807) ViewController ()   <UIScrollViewDelegate>
/**
 *滚动视图的控件
 */
@property(nonatomic,strong)UIScrollView* scroll;
/**
 *页码指示视图的控件
 */
@property(nonatomic,strong)UIPageControl* pageControl;
/**
 *显示左边图片的控件
 */
@property(nonatomic,strong)UIImageView* LeftImageView;
 /**
 *显示中心图片的控件
 */
 @property(nonatomic,strong)UIImageView* centerImageView;
 /**
 *显示右边图片的控件
 */
@property(nonatomic,strong)UIImageView* rightImageView;
/**
 *保存图片的数组
 */
@property(nonatomic,strong)NSArray* imageArray;
/**
 *图片的当前下标索引
 */
@property(nonatomic,assign)int currentIndex;
/**
*图片总数
*/
@property(nonatomic,assign)int imageCount;

@end

 @implementation ViewController

- (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor=[UIColor blackColor];
self.currentIndex=0;
[self createScrollView];
[self createPageControl];
[self createImageView];
[self loadImage];
[self setImageByIndex:self.currentIndex];
}
/**
 *以下是搭建UI界面的方法
 */
-(void)loadImage
{
self.imageArray=@[@"0.jpg",@"1.jpg",@"2.jpg",@"3.jpg"];
self.imageCount=self.imageArray.count;
}
-(void)createScrollView
{
self.scroll=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 180, 320, 220)];
self.scroll.backgroundColor=[UIColor redColor];
self.scroll.showsHorizontalScrollIndicator=NO;
self.scroll.showsVerticalScrollIndicator=NO;
self.scroll.pagingEnabled=YES;
self.scroll.bounces=NO;
self.scroll.delegate=self;
self.scroll.contentOffset=CGPointMake(320, 0);
self.scroll.contentSize=CGSizeMake(320*kImageCount, 220);
[self.view addSubview:self.scroll];
}
-(void)createPageControl
{
self.pageControl=[[UIPageControl alloc]initWithFrame:CGRectMake(130, 568*0.9, 60, 20)];
self.pageControl.currentPageIndicatorTintColor=[UIColor redColor];
self.pageControl.pageIndicatorTintColor=[UIColor blueColor];
self.pageControl.enabled=YES;
self.pageControl.numberOfPages=kImageCount;
[self.view addSubview:self.pageControl];
}
-(void)createImageView
{
self.LeftImageView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 220)];
[self.scroll addSubview:self.LeftImageView];

self.centerImageView=[[UIImageView alloc]initWithFrame:CGRectMake(320, 0, 320, 220)];
[self.scroll addSubview:self.centerImageView];

self.rightImageView=[[UIImageView alloc]initWithFrame:CGRectMake(640, 0, 320, 220)];
[self.scroll addSubview:self.rightImageView];
}
#pragma mark ----刷新图片
-(void)refreshImage
{
if (self.scroll.contentOffset.x>320) {
    self.currentIndex=((self.currentIndex+1)%self.imageCount);
}
else if(self.scroll.contentOffset.x<320){
    self.currentIndex=((self.currentIndex-1+self.imageCount)%self.imageCount);
}
[self setImageByIndex:self.currentIndex];
}
#pragma mark ----该方法根据传回的下标设置三个ImageView的图片
-(void)setImageByIndex:(int)currentIndex
{
NSString* curruntImageName=[NSString stringWithFormat:@"%d.jpg",currentIndex];
self.centerImageView.image=[UIImage imageNamed:curruntImageName];
NSLog(@"当前页的名字是:%@",curruntImageName);

self.LeftImageView.image=[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",((self.currentIndex-1+self.imageCount)%self.imageCount)]];
NSLog(@"左边的图片名字是:%@",[NSString stringWithFormat:@"%d.jpg",((self.currentIndex-1+self.imageCount)%self.imageCount)]);

self.rightImageView.image=[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",((self.currentIndex+1)%self.imageCount)]];
NSLog(@"右边的图片名字是:%@",[NSString stringWithFormat:@"%d.jpg",((self.currentIndex+1)%self.imageCount)]);
self.pageControl.currentPage=currentIndex;
}
#pragma mark ----UIScrollViewDelegate代理方法(停止加速时调用)
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self refreshImage];
self.scroll.contentOffset = CGPointMake(320,0);
self.pageControl.currentPage = self.currentIndex;
NSLog(@"停止了加速,停在第%d页",self.pageControl.currentPage+1);
}

相关文章

  • 三张Imageview实现无限图片轮播

    第一部分 原理思路 第二部分 代码部分:

  • iOS高效图片轮播 - 两个imageView实现

    iOS高效图片轮播 - 两个imageView实现 iOS高效图片轮播 - 两个imageView实现

  • 三张图片实现无限轮播

    简单描述一下原理 原理其实很简单,只需往scrollerView上放三个imageView即可,初始化时,调整co...

  • 轮播图

    ios美女小同事写了一个可以支持显示一张图片,两张图片左右轮播,三张以及三张以上图片无限轮播的轮子,支持加载本地图...

  • 三个ImageView实现无限图片轮播

    无限轮播的简单实现:该有的注释都在代码中了,这里就不再细说, 有需求的童鞋可以点这里.github源码地址 如果这...

  • css3实现无缝轮播图片

    实现思路: 需求: 实现三张图片无缝轮播 1: 定义一个父级div , 这个div的宽度为轮播图片元素的宽度 本文...

  • iOS无限轮播图 无限复用

    关于轮播图的实现, zz所了解到的有三种: 利用scrollView根据轮播图片的多少来创建imageview 然...

  • 用两个ImageView实现图片的轮播

    在很多应用中我们都可以看到图片轮播器 下来我将使用两个imageView实现图片的轮播,也是目前我用到最简单的方法...

  • iOS 图片轮播器无限滚动的实现

    我们都知道,实现图片轮播器最主要的功能就是如何让图片能够无限轮播,本篇文章就重点讨论一下无限轮播的思路,弱化其他方...

  • 简单广告轮播demo

    思路: scrollview pageControl开启,利用三张图片实现轮播 ,始终显示中间view,通过左右滑...

网友评论

      本文标题:三张Imageview实现无限图片轮播

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