3个imageView实现多张图片轮播

作者: 风鹰lm | 来源:发表于2017-08-03 15:54 被阅读0次

查看网上实现的图片轮播大都需要多个imageView,分享一个比较简洁的实现,希望大家批评指教,也希望能帮助到跟我一样的小白

github地址:https://github.com/Swellyhowl/lmiOS

简介:

代码有一个scrowView和3个imageView,图片来自于本地,可能在实际的应用中还有很多弊端,比如图片的命名方式,图片可能来自于网路等,这些会在以后的项目跟大家一起学习



思路:

为scrowView添加3个imageView,分别为leftImageView,middleImageView和rightImageView。

1.  让middleImageView显示在屏幕上,默认显示第一张图片,(假设图片名字分别为1.png,2.png...5.png),即: middleImageview-->1.png,则rightImageView-->2.png ,那leftImageView-->leftImageview

2.   每滑动一次,都要将scrowview的contentOffset设置为两个Imageview的宽度,实现一个滚动的效果,此时要注意,还要在滚动结束后,重新将contentOffset重新调整为一个ImageView的宽度,用来实现下一次的滚动效果,同时还要把图片进行重新调整

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

NSLog(@"DidEndScrollingAnimation");

[self reloadImgs];

[self.scrw setContentOffset:CGPointMake(offsetX, 0) animated:NO];

}

//重新加载图片,重新设置三个imgView

- (void) reloadImgs{

int currentIndex = (int)self.pageC.currentPage;

NSLog(@"currentIndex%d",currentIndex);

int preIndex = (currentIndex + 4) % 5;

int nextIndex = (currentIndex + 1) % 5;

[self.imgViewLeft setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d",preIndex]]];

[self.imgViewMiddle setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d",currentIndex]]];

[self.imgViewRight setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d",nextIndex]]];

}

3. 这样就可以实现图片轮播,具体实现看github代码

其实还可以将scrowview和imageView进行自定义,这样可以设置多样的风格,也可以根据自己的需要设置不同的需求,比如添加一个向左向右的箭头之类的,后面就继续学习,进行改进,希望大神能多给小白一点建议

相关文章

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

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

  • 3个imageView实现多张图片轮播

    查看网上实现的图片轮播大都需要多个imageView,分享一个比较简洁的实现,希望大家批评指教,也希望能帮助到跟我...

  • 轮播图实现

    轮播图在实际应用开发使用较多,本文说明一下具体的实现过程。 一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...

  • RN-第三方之react-native-image-zoom-v

    本文内容多张图片放大后轮播、捏合效果单张图片放大捏合效果 多张图片放大后轮播、捏合效果 单张图片放大捏合效果

  • iOS无限轮播图 无限复用

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

  • 轮播图:无限轮播(三图轮播原理)

    前言 所谓三图轮播原理:只创建三个imageView,用来显示多于多张图片,其中心思想是每次都让中间的imageV...

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

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

  • js轮播图

    什么是轮播图呢?能够实现多张图片循环出现效果的我们称之为轮播图。 html样式 css样式 js样式 这就是我敲出...

  • Android实现轮播图点击图片放大效果

    最近项目中需要实现轮播图显示商品图片,当用户点击商品图片的时候,需要图片放大显示,当然用户还能进行多张图片的滑动切...

  • Android实现轮播图点击图片放大效果

    最近项目中需要实现轮播图显示商品图片,当用户点击商品图片的时候,需要图片放大显示,当然用户还能进行多张图片的滑动切...

网友评论

    本文标题:3个imageView实现多张图片轮播

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