iOS开发UI篇—UIScrollView控件实现图片轮播

一、实现效果

实现图片的自动轮播

二、实现代码storyboard中布局

代码：

1#import"YYViewController.h"

2

3@interface YYViewController ()

4 @property (weak, nonatomic) IBOutletUIScrollView *scrollview; 5/**

6 * 页码

7*/

8 @property (weak, nonatomic) IBOutletUIPageControl *pageControl; 9

10 @property (nonatomic, strong) NSTimer *timer;

11@end

12

13@implementation YYViewController

14

15 - (void)viewDidLoad

16 {

17 [super viewDidLoad];

18

19// 图片的宽

20CGFloatimageW = self.scrollview.frame.size.width;

21// CGFloatimageW = 300;

22// 图片高

23CGFloatimageH = self.scrollview.frame.size.height;

24// 图片的Y

25CGFloatimageY = 0;

26// 图片中数

27NSIntegertotalCount = 5;

28// 1.添加5张图片

29for (int i = 0; i

30UIImageView *imageView = [[UIImageViewalloc] init];

31// 图片X

32CGFloatimageX = i * imageW;

33// 设置frame

34imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);

35// 设置图片

36NSString *name = [NSStringstringWithFormat:@"img_0%d", i + 1]; 37imageView.image = [UIImageimageNamed:name];

38// 隐藏指示条

39self.scrollview.showsHorizontalScrollIndicator = NO;

40

41 [self.scrollviewaddSubview:imageView];

42 }

43

44// 2.设置scrollview的滚动范围

45CGFloatcontentW = totalCount *imageW;

46//不允许在垂直方向上进行滚动

47self.scrollview.contentSize = CGSizeMake(contentW, 0);

48

49// 3.设置分页

50self.scrollview.pagingEnabled = YES;

51

52// 4.监听scrollview的滚动

53self.scrollview.delegate = self;

54

55 [self addTimer];

56 }

57

58 - (void)nextImage

59 {

60int page = (int)self.pageControl.currentPage;

61if (page == 4) {

62 page = 0;

63}else

64 {

65 page++;

66 }

67

68// 滚动scrollview

69CGFloat x = page * self.scrollview.frame.size.width;

70self.scrollview.contentOffset = CGPointMake(x, 0);

71 }

72

73// scrollview滚动的时候调用

74 - (void)scrollViewDidScroll:(UIScrollView *)scrollView

75 {

76NSLog(@"滚动中");

77// 计算页码

78// 页码 = (contentoffset.x + scrollView一半宽度)/scrollView宽度 79CGFloatscrollviewW= scrollView.frame.size.width;

80CGFloat x = scrollView.contentOffset.x;

81int page = (x + scrollviewW / 2) / scrollviewW;

82self.pageControl.currentPage = page;

83 }

84

85// 开始拖拽的时候调用

86 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

87 {

88// 关闭定时器(注意点; 定时器一旦被关闭,无法再开启)

89// [self.timer invalidate];

90 [self removeTimer];

91 }

92

93 - (void)scrollViewDidEndDragging:(UIScrollView

*)scrollViewwillDecelerate:(BOOL)decelerate

94 {

95// 开启定时器

96 [self addTimer];

97 }

98

99/**

100 * 开启定时器

101*/

102 - (void)addTimer{

103

104self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self

selector:@selector(nextImage) userInfo:nilrepeats:YES];

105 [[NSRunLoopcurrentRunLoop] addTimer:self.timerforMode:NSRunLoopCommonModes]; 106 }

107/**

108 * 关闭定时器

109*/

110 - (void)removeTimer

111 {

112 [self.timer invalidate];

113 }

114@end

提示：以下两个属性已经和storyboard中的控件进行了连线。

@property (weak, nonatomic) IBOutletUIScrollView *scrollview;

@property (weak, nonatomic) IBOutletUIPageControl *pageControl;

补充：定时器NSTimer

定时器适合用来隔一段时间做一些间隔比较长的操作

NSTimeInterval:多长多件操作一次

target :操作谁

selector : 要操作的方法

userInfo: 传递参数

repeats: 是否重复

self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextImage) userInfo:nilrepeats:YES];

Html、js图片轮播代码

Html、js图片轮播代码 现在基本上每个网站都有一个自动轮播的banner广告图，在没有任何按钮的情况下，图片在规定的时间内进行自动切换。下面是html、js 图片轮播代码详情。 代码效果图实例： 第一秒： 第二秒：

第三秒： 详细代码如下：Html代码部分：

• 
• 
• 

Css代码部分： Javascript代码部分：

淘宝全屏轮播海报制作方法以及代码