01.轮播图之四 ：imageViews（2 或者 3 个imageview） 轮播

首先说下 3 个imageView的轮播，这个逻辑分析起来 比较简单，

先上传个图片吧：：：：：

主要分析起来，核心就是这样 ：新的图片永远是加在中间ImageView上的，下一轮的第一张图片，是上一轮的第二张图片，这样就可以形成一个无缝滚动了，

只是切换了数据的逻辑。难理解就算了，看代码才容易懂………………

.h 的声明文件

@interface ImageViewShuffling : UIView

@property (nonatomic,strong)NSArray *array;

@end

.m 的具体实现，这里是理解这个逻辑的好地方————————

@interface ImageViewShuffling ()<UIScrollViewDelegate>

@property (nonatomic,strong)UIScrollView *scrollView;

@property (nonatomic,strong)UIImageView *leftImageView;
@property (nonatomic,strong)UIImageView *centerImageView;
@property (nonatomic,strong)UIImageView *rightImageView;

@property (nonatomic,assign)NSInteger  currentIndex;

@end

@implementation ImageViewShuffling
@synthesize array = _array;

-(instancetype)initWithFrame:(CGRect)frame{

    if (self == [super initWithFrame:frame]) {
        self.currentIndex = 0;
    }
    return self;
}

-(UIScrollView*)scrollView{

    if (_scrollView == nil) {
        CGRect scrollRect = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
        _scrollView = [[UIScrollView alloc]initWithFrame:scrollRect];
        [self addSubview:_scrollView];
        _scrollView.pagingEnabled = YES;
        _scrollView.delegate = self;
    }
    return _scrollView;
}

-(void)setArray:(NSArray *)array{

    NSAssert(array.count != 0, @"传入的滚动数组是 空的");
    _array = array;
    [self initImageViews];
}

-(void)initImageViews{

    self.leftImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    self.centerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(self.frame.size.width, 0, self.frame.size.width, self.frame.size.height)];
    self.rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(self.frame.size.width*2, 0, self.frame.size.width, self.frame.size.height)];
    self.leftImageView.contentMode = UIViewContentModeScaleAspectFit;
    self.centerImageView.contentMode = UIViewContentModeScaleAspectFit;
    self.rightImageView.contentMode = UIViewContentModeScaleAspectFit;

    [self.scrollView addSubview:self.leftImageView];
    [self.scrollView addSubview:self.centerImageView];
    [self.scrollView addSubview:self.rightImageView];
    /*千万不要忘记设置这里*/
    self.scrollView.contentSize = CGSizeMake(self.frame.size.width * 3 , 0);
    self.scrollView.contentOffset = CGPointMake(self.frame.size.width , 0);

    [self setImageWith:self.currentIndex];
}

-(void)setImageWith:(NSInteger)integer{

    self.centerImageView.backgroundColor = (UIColor*)self.array[integer];
    self.leftImageView.backgroundColor = (UIColor*)self.array[(integer - 1 + self.array.count)%(self.array.count)];
    self.rightImageView.backgroundColor = (UIColor*)self.array[(integer + 1)%(self.array.count)];
}
/**理解此处，你就能理解整个逻辑实现*/
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    if (scrollView == self.scrollView) {

        if (scrollView.contentOffset.x > self.frame.size.width ) {//右滑

            self.currentIndex = (self.currentIndex+1) % (self.array.count);

        }else  if(scrollView.contentOffset.x < self.frame.size.width ){//左滑

            self.currentIndex = (self.currentIndex - 1 + self.array.count)%(self.array.count);

        }else{//

        }
        [self setImageWith:self.currentIndex];
        self.scrollView.contentOffset = CGPointMake(self.frame.size.width , 0);
    }
}

上面就是 3张图实现的 轮播图，童叟无欺………………

调用：：：：

-(void)prepareImageViewShuffling{

    ImageViewShuffling *imageViewShuffling = [[ImageViewShuffling alloc]initWithFrame:CGRectMake(10, 450, self.view.frame.size.width -20, 220)];
    [self.view addSubview:imageViewShuffling];;
    imageViewShuffling.array = self.arr;
}

********************************************************************************

弄懂了上面这个，相信下面介绍这个两张图片实现的轮播 ，对你就是小case

他就是对上面3张图片的简化…………

看完上面的逻辑，理解后发现, 左侧，或者右侧的 imageView 始终有一个是备用的，就像实现的代码一样，你不是向左就是向右滑动；

根据这个理由，就想到了这个，实时检测scroll 的滚动方向，这样就可以实现：一个主要显示的imageView，和一个 待显示的imageView……

越说越啰嗦，直接撸代码……

.h 文件

@interface ImageView2Shuffling : UIView
@property (nonatomic,strong)NSArray *array;

@end

.m 实现文件，逻辑变化不大

@interface ImageView2Shuffling ()<UIScrollViewDelegate>

@property (nonatomic,strong)UIScrollView *scrollView;
@property (nonatomic,strong)UIImageView *currentImageView;
@property (nonatomic,strong)UIImageView *otherImageView;
@property (nonatomic,assign)NSInteger  currentIndex;
/*这个是检测滚动方向的*/
@property (nonatomic,strong)NSString *directionString;
@end

@implementation ImageView2Shuffling
@synthesize array = _array;

-(instancetype)initWithFrame:(CGRect)frame{

    if (self == [super initWithFrame:frame]) {
        self.currentIndex = 0;
        self.directionString = [[NSString alloc]init];
    }
    return self;
}

-(UIScrollView*)scrollView{

    if (_scrollView == nil) {
        CGRect scrollRect = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
        _scrollView = [[UIScrollView alloc]initWithFrame:scrollRect];
        [self addSubview:_scrollView];
        _scrollView.pagingEnabled = YES;
        _scrollView.delegate = self;
    }
    return _scrollView;
}

-(void)setArray:(NSArray *)array{

    NSAssert(array.count != 0, @"传入的滚动数组是 空的");
    _array = array;
    [self initImageViews];
}

-(void)initImageViews{
    /*这里写个空 frame 的imageview   */
    self.otherImageView = [[UIImageView alloc]init];
    [self.scrollView addSubview:self.otherImageView];

    self.currentImageView = [[UIImageView alloc]initWithFrame:CGRectMake(self.frame.size.width, 0, self.frame.size.width, self.frame.size.height)];
    self.currentImageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.scrollView addSubview:self.currentImageView];

    self.scrollView.contentSize = CGSizeMake(self.frame.size.width * 3 , 0);
    self.scrollView.contentOffset = CGPointMake(self.frame.size.width , 0);

    [self setImageWith:self.currentIndex];
}

-(void)setImageWith:(NSInteger)integer{

    self.currentImageView.backgroundColor = (UIColor*)self.array[integer];
}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    if (scrollView == self.scrollView) {

        self.directionString = @"";

        if (scrollView.contentOffset.x > self.frame.size.width ) {//右滑

            self.currentIndex = (self.currentIndex+1) % (self.array.count);

        }else  if(scrollView.contentOffset.x < self.frame.size.width ){//左滑

            self.currentIndex = (self.currentIndex - 1 + self.array.count)%(self.array.count);
        }else{//
        }
        [self setImageWith:self.currentIndex];
        self.scrollView.contentOffset = CGPointMake(self.frame.size.width , 0);
    }
}

/*这里集中了些 修改的代码检测滚动方向，改变otherImageview 的位置，和颜色*/
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

    if (scrollView == self.scrollView) {

        if (scrollView.contentOffset.x > self.frame.size.width ) {//右滑

            [self refreshOtherImageViewWithDirectionString:@"right"];
        }else  if(scrollView.contentOffset.x < self.frame.size.width ){//左滑

            [self refreshOtherImageViewWithDirectionString:@"left"];
        }else{//
        }
    }
}

-(void)refreshOtherImageViewWithDirectionString:(NSString*)direction{

    if ([self.directionString isEqualToString:direction]) {
        return ;
    }
    self.directionString = direction;

    CGRect frame; NSInteger integer;
    if ([direction isEqualToString:@"right"]) {

        integer = (self.currentIndex+1) % (self.array.count);
        frame = CGRectMake(self.frame.size.width*2, 0, self.frame.size.width, self.frame.size.height);
    }else{ //if "left"

        integer = (self.currentIndex - 1 + self.array.count)%(self.array.count);
        frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    }
    self.otherImageView.backgroundColor = (UIColor*)self.array[integer];
    self.otherImageView.frame = frame;
}

写到这里，应该可以了，简单来讲，就是用一个direction 替换了一个imageview ，应该算减少了UI 的开销，增加了逻辑判断和运算

调用：：：：

-(void)prepareImageView2Shuffling{

    ImageView2Shuffling *imageView2Shuffling = [[ImageView2Shuffling alloc]initWithFrame:CGRectMake(10, 450, self.view.frame.size.width -20, 220)];
    [self.view addSubview:imageView2Shuffling];;
    imageView2Shuffling.array = self.arr;
}

突然感觉要超额完成任务的节拍，为自己加油点赞………………

时间： 2024-07-31 14:15:39

01.轮播图之四 ：imageViews（2 或者 3 个imageview） 轮播的相关文章

【解决火车轮播图小圆点跳的问题】传统轮播图-三位法

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 ul,ol{ 12 list-style:

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改为$(

从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: 1 /// <summary> 2 /// 详情页 3 /// </summary> 4 /// <param name="id"><

妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了

今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> </div> <div> <img src="${static}/image/index/banner/2.jpg" /> </div> <div> <img src="${static}/image/index/

Android开发之ViewPager实现轮播图（轮播广告）效果的自定义View

最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面布局实现如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&

jq轮播图支持ie7

用过一些轮播框架  但是有的不正常ie7 所以就自己找资料写了一个 代码不粗糙的 <!DOCTYPE html><html><head><title>轮播图支持ie7依赖jq</title><meta charset="utf-8" /><script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script

Android轮播图

轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考目前测试图片为mipmap中的图片 没有写从网络加载图片 可自行根据需求在getShowView()方法中修改 1.定时切换 通过handle延时发送通知改变界面 然后在切换viewpage的界面之后 再次发送此延时通知 就ok咯 还可以通过timer定时器实现 2.无限轮播效果 如果我们只是在自动轮播到最后一页 然后进行判断让切换到第一页 这样是可以

android ViewPager实现的轮播图广告自定义视图,网络获取图片和数据

public class SlideShowAdView extends FrameLayout { //轮播图图片数量    private static int IMAGE_COUNT = 3;    //自动轮播的时间间隔    private final static int TIME_INTERVAL = 5;    //自动轮播启用开关    private final static boolean isAutoPlay = false;       //自定义轮播图的资源ID   

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge