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

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

(0)

相关推荐

  • iOS图片界面翻页切换效果

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

  • iOS实现图片自动切换效果

    本文实例为大家分享了iOS实现图片自动切换的具体代码,供大家参考,具体内容如下 #import "ViewController.h" #define ImageViewCount 5 @interface ViewController ()<UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *imageScrollView; @property (weak, nonatomic)

  • js图片自动切换效果处理代码

    复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5

  • JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

    本文实例讲述了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

  • js实现轮播图效果 纯js实现图片自动切换

    本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片: 2. 鼠标离开,恢复自动播放: 3. 点击下方中间几个小圆圈,也会自动切换图片: 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&quo

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

  • JS+CSS实现淡入式焦点图片幻灯切换效果的方法

    本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • jQuery bxCarousel实现图片滚动切换效果示例代码

    BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动 参数含义: display_num:显示元素的数量,几张图片 move:单击左右控制键时,移动的元素个数,此处为移动2张图片 prev_image:上一元素按钮图片 next_image:下一元素按钮图片 margin:图片之间的间隙,一般设为10px auto:自动滚动效果 controls:是否

  • Android编程单击图片实现切换效果的方法

    本文实例讲述了Android编程单击图片实现切换效果的方法.分享给大家供大家参考,具体如下: 新建一个Android项目,命名为FrameLayout 此实例主要操作src文件夹下的MainActivity.Java类文件和res/layout下的activity_main.xml布局文件 1.布局主页面代码activity_main.xml↓ <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android&qu

  • Android实现图片自动切换功能(实例代码详解)

    在Android中图片的自动切换不仅可以实现自动切换,而且还可以使用手动切换.而且一般在切换的时候,在图片下方还带有其他内容的切换,用来标记是第几个图片的切换. 这种效果在我们日常生活中很常见,例如某宝购物,一些商城都可以使用到,用户体验度极好,今天小编就通过实例代码给大家分享android 图片自动切换功能的实现. 实现效果如下: 具体的示例代码如下: 布局代码: <?xml version="1.0" encoding="utf-8"?> <S

  • jquery实现焦点图片随机切换效果的方法

    本文实例讲述了jquery实现焦点图片随机切换效果的方法.分享给大家供大家参考.具体如下: 1. 运行效果如下图所示: 2.完整实例代码点击此处本站下载. 3.完整代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>Slides, A Slideshow Plugin f

随机推荐