iOS实现图片自动切换效果

本文实例为大家分享了iOS实现图片自动切换的具体代码,供大家参考,具体内容如下

#import "ViewController.h"
#define ImageViewCount 5

@interface ViewController ()<UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *imageScrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *imageViewPageControl;
@property (strong, nonatomic) NSTimer *timer;
@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];

 [self addImageView2ScrollView];
 self.imageScrollView.contentSize = CGSizeMake(self.imageScrollView.frame.size.width * ImageViewCount, 0);

 self.imageScrollView.delegate = self;
 self.imageScrollView.pagingEnabled = YES;//UIScrollView支持拖动分页
 self.imageViewPageControl.numberOfPages = ImageViewCount;

 [self addScrollTimer];
}

- (void)rotatePic{
 int currentPageIndex = self.imageViewPageControl.currentPage;
 if(++currentPageIndex == 5){
  currentPageIndex = 0;
 }
 CGFloat offsetX = currentPageIndex * self.imageScrollView.frame.size.width;
 [UIView animateWithDuration:1 animations:^{
  self.imageScrollView.contentOffset = CGPointMake(offsetX, 0);
 }];
}

/**添加图片到imageScrollView*/
- (void)addImageView2ScrollView{
 CGFloat imageWidth = self.imageScrollView.frame.size.width;
 CGFloat imageHeight = self.imageScrollView.frame.size.height;
 for(int i = 0;i <= ImageViewCount;i++){
  UIImageView *imageInScroll = [[UIImageView alloc] init];
  imageInScroll.frame = CGRectMake(i * imageWidth, 0, imageWidth, imageHeight);
  imageInScroll.image = [UIImage imageNamed:[NSString stringWithFormat:@"img_%02d",i + 1]];
  [self.imageScrollView addSubview:imageInScroll];
 }
}

// 正滚动时执行
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
 CGFloat offX = self.imageScrollView.contentOffset.x;//(0,0)距离content内部左上顶点的x轴长度
 NSLog(@"~~~~~~~%f ^^^^^^%f", offX, self.imageScrollView.frame.size.width);
 int currentPageIndex = (offX + .5f * self.imageScrollView.frame.size.width) / self.imageScrollView.frame.size.width;
 self.imageViewPageControl.currentPage = currentPageIndex;
}

- (void)addScrollTimer{
 self.timer = [NSTimer timerWithTimeInterval:2 target:self selector:@selector(rotatePic) userInfo:nil repeats:YES];
 [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)removeScrollTimer{
 [self.timer invalidate];//释放定时器
 self.timer = nil;
}

// 开始准备滚动时执行 移除定时滚动操作
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
 NSLog(@"~~~scrollViewWillBeginDragging");
 [self removeScrollTimer];
}

// 结束滚动后执行 添加定时滚动操作
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
 NSLog(@"~~~scrollViewDidEndDragging");
 [self addScrollTimer];
}
@end

UIScrollView的运用,以上代码中有详细注释,需注意2点:

1.注意设置contentSize属性。其中contentSize表示scroll内容尺寸大小

2.注意设置代理UIScrollViewDelegate,才可调用其中的方法

对于定时器NSTimer的运用需注意

1.在线程的loop中添加定时器

2.注意使用完成回收NSTimer

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-02-24

iOS图片界面翻页切换效果

先看效果: 下面贴代码: #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIImageView *backgroundView; @property (strong,nonatomic) NSArray *array; @end @implementation ViewController -(NSArray *)array { if (_arra

Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果

废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧数字相比较来切换数字变换的,大致使用方法如下: //获取输入框中的数字 int newNumber = Integer.parseInt(etInput.getText().toString()); //获取个.十.百位数字 int nbai = newNumber / 100; int nshi

JS模仿腾讯图片站的图片翻页按钮效果完整实例

本文实例讲述了JS模仿腾讯图片站的图片翻页按钮效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" conten

jQuery实现点击图片翻页展示效果的方法

本文实例讲述了jQuery实现点击图片翻页展示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>基于jQuery实现的点击图片翻页展示效果</title> <meta http-equiv="content-type&q

iOS实现日历翻页动画

本文我主要描述两方面: 1.日历(简单描述原理) 2.翻页动画(重点) 最终的效果如下图:     图中沿四个对角的翻页动画,代表对应方向手势的滑动 1. 日历 要实现一个日历,其实原理很简单,我们只要知道三个数据: 1.今天是哪一天 2.这个月的第一天是星期几(哪天) 3.这个月总共有多少天 根据这个三个数据,就可以把得到的日期显示在日历上了,至于日历用什么来显示,我个人比较喜欢用UICollectionView,一个cell代表一天,当然也可以用很多个label,button来显示. 1.获

js图片轮播手动切换效果

利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot

Android实现闪屏及注册和登录界面之间的切换效果

在没给大家介绍正文之前先给大家说下实现思路: 先分别实现闪屏.注册界面.登录界面的活动,再用Intent将相关的活动连接起来,实现不同活动之间的跳转.此次试验代码较多,我只列出主要代码,详细的代码可用底部的下载链接下载. 一.实验效果图: 二.主要代码: (1)WelcomeActivity.Java(这部分代码实现的是第一页的欢迎页面) package com.example.flashscreendemo; import android.app.Activity; import androi

CSS3+JavaScript实现翻页幻灯片效果

先上效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position

jq实现左侧显示图片右侧文字滑动切换效果

分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 下面给大家分享下基于jq实现左侧显示图片右侧文字滑动切换效果,用div+css布置表单借用jq实现特效,具体不多说了,请看下面代码. html代码: <div class="index-new w1200 mt30"> <div class="indexadd mt50 mb60"> <div id="b

vue.js实现标签页切换效果

第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样: 那么用vue.js实现上述的效果,其实也有两种途径,一种使用vue-router,vue-router是vue.j