图片轮播器

只添加三个UIImageView 到UIScrollView中,通过对上一张、当前、下一张的图片切换来完成滚动。

将定时器加到forMode:NSRunLoopCommonModes 来保证及时正在滑动uitableview也能保证图片轮播器的正常定时滚动

先看到下面的图片




源代码如下,附件是整个工程所需的代码和图片资源。

//

//  ViewController.m

//  图片轮播器

//

//  Created by wusiping on 15/12/3.

//  Copyright (c) 2015 wusiping. All rights reserved.

//


#import "ViewController.h"


@interface ViewController ()<UIScrollViewDelegate>

@property(nonatomic, weak)UIScrollView *scrollView;

@property(nonatomic, weak)UIPageControl *pageControl;

@property(nonatomic, weak)UIImageView *preImageView;

@property(nonatomic, weak)UIImageView *currentImageView;

@property(nonatomic, weak)UIImageView *nextImageView;

@property(nonatomic, strong)NSArray *imageArray;

@property(nonatomic, assign)BOOL isDragging;

@end


@implementation ViewController


- (void)viewDidLoad {

    [super viewDidLoad];

    _isDragging = NO;

    [self setUpImageArray];

    [self setUpScrollView];

    [self setUpPageControl];

    [self setUpImageView];

    [self timer];

}


//初始化图片数组

- (void)setUpImageArray

{

    NSArray *array = [[NSArray alloc]initWithObjects:@"img_01",@"img_02",@"img_03",@"img_04",@"img_05", nil];

    _imageArray = array;

}


//初始化滚动视图

- (void)setUpScrollView

{

    UIScrollView *scrollView = [[UIScrollView alloc]init];

    CGFloat scrollViewX = 0;

    CGFloat scrollViewY = 20;

    CGFloat scrollViewW = [UIScreen mainScreen].bounds.size.width;

    CGFloat scrollViewH = [UIScreen mainScreen].bounds.size.height *2/6;

    CGRect scrollViewF = CGRectMake(scrollViewX, scrollViewY, scrollViewW, scrollViewH);

    scrollView.frame = scrollViewF;

    scrollView.backgroundColor = [UIColor redColor];

    scrollView.contentSize = CGSizeMake(scrollViewW * 3, 0 );

    scrollView.pagingEnabled = YES;

    scrollView.contentOffset = CGPointMake(scrollViewW , 0);

    _scrollView = scrollView;

    _scrollView.delegate = self;

    [self.view addSubview:_scrollView];

}


//添加上一张图片、当前图片、下一张图片到滚动图

- (void)setUpImageView

{

    CGFloat imageViewY = 0;

    CGFloat imageViewW = [UIScreen mainScreen].bounds.size.width;

    CGFloat imageViewH = self.scrollView.frame.size.height;

    

    //前一张

    UIImageView *preImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:_imageArray[_imageArray.count -1] ]];

    CGFloat preImageViewX = 0;

    CGRect preImageViewF = CGRectMake(preImageViewX, imageViewY, imageViewW, imageViewH);

    preImageView.frame = preImageViewF;

    _preImageView = preImageView;

    [self.scrollView addSubview:_preImageView];

    

    //当前图片

    UIImageView *currentImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:_imageArray[0]]];

    CGFloat currentImageViewX = imageViewW;

    CGRect currentImageViewF = CGRectMake(currentImageViewX, imageViewY, imageViewW, imageViewH);

    currentImageView.frame = currentImageViewF;

    _currentImageView = currentImageView;

    [self.scrollView addSubview:_currentImageView];


    //后一张图片

    UIImageView *nextImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:_imageArray[1]]];

    CGFloat nextImageViewX = imageViewW * 2;

    CGRect nextImageViewF = CGRectMake(nextImageViewX, imageViewY, imageViewW, imageViewH);

    nextImageView.frame = nextImageViewF;

    _nextImageView = nextImageView;

    [self.scrollView addSubview:_nextImageView];

    

}


//初始化分页控制器

- (void)setUpPageControl

{

    UIPageControl *pageControl = [[UIPageControl alloc]init];

    CGFloat pageControlX = 0;

    CGFloat pageControlW = 100;

    CGFloat pageControlH = 30;

    CGFloat pageControlY = CGRectGetMaxY(self.scrollView.frame) - pageControlH;

    CGRect pageControlF = CGRectMake(pageControlX, pageControlY, pageControlW, pageControlH);

    pageControl.frame = pageControlF;

    pageControl.numberOfPages = _imageArray.count;

    pageControl.currentPage = 0;

    self.pageControl = pageControl;

    [self.view addSubview:_pageControl];

}


//定时器

- (void)timer

{

    NSTimer *time = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage:) userInfo:nil repeats:YES];

    [[ NSRunLoop currentRunLoop] addTimer:time forMode:NSRunLoopCommonModes];

}


- (void)nextImage:(BOOL)isDragging

{

    if (_isDragging == YES) {

        return;

    }else{

        CGPoint offset = self.scrollView.contentOffset;

        offset.x += offset.x;

        [self.scrollView setContentOffset:offset animated:YES];

    }

}


#pragma 滚动图的代理方法

//在此方法中,不断更新上一张、当前、下一张图片


- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

    static int i = 0;

    NSLog(@" i 等于 %d",i);

    self.pageControl.currentPage = i;

    CGFloat offset = self.scrollView.contentOffset.x;

    

    UIImage *nextImage = [UIImage imageNamed:_imageArray[i == _imageArray.count - 1 ? 0 : i + 1]];

    _nextImageView.image = nextImage;

    

    UIImage *preImage = [UIImage imageNamed:_imageArray[i == 0 ? _imageArray.count - 1 : i - 1]];

    _preImageView.image = preImage;

    

    if (offset == 0 ) {

        _currentImageView.image = _preImageView.image;

        if (i == 0) {

            i = _imageArray.count - 1;

        }

        else

            i --;

        self.scrollView.contentOffset = CGPointMake([UIScreen mainScreen].bounds.size.width, 0);


    }else if(offset == [UIScreen mainScreen].bounds.size.width * 2)

    {

        _currentImageView.image = _nextImageView.image;

        if (i == _imageArray.count - 1) {

            i = 0;

        }

        else

            i ++;

        self.scrollView.contentOffset = CGPointMake([UIScreen mainScreen].bounds.size.width, 0);


    }


}


- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

{

    _isDragging = YES;

    NSLog(@"开始拖拽");

}


- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

{

    _isDragging = NO;

    NSLog(@"结束拖拽");

}


@end









  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片是一种常见的网页元素,它用于在页面上展示一系列图片,通常通过连续切换或滑动显示下一张图片。HTML、CSS和JavaScript一起使用可以实现这样的效果。以下是创建一个基本图片的基本步骤: **HTML结构**: ```html <div class="carousel-container"> <div class="carousel-items"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <!-- 添加更多的图片 --> </div> <div class="carousel-navigation"> <button prev></button> <!-- 上一张按钮 --> <button next></button> <!-- 下一张按钮 --> </div> </div> ``` **CSS样式**: ```css .carousel-container { position: relative; width: 100%; overflow: hidden; } .carousel-items { display: flex; transition: transform 0.6s ease; } .carousel-items img { width: 100%; height: auto; opacity: 0; /* 隐藏初始图片 */ order: 0; transition: opacity 0.6s ease; } .carousel-item-active img { opacity: 1; order: 1; } .carousel-navigation button { /* 样式自定义 */ } ``` **JavaScript或jQuery (可选)**: 为了实现自动轮和用户交互,你可以使用JavaScript或库如jQuery来添加动态行为: ```javascript var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("carousel-items img"); for (i = 0; i < slides.length; i++) { slides[i].style.opacity = "0"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.opacity = "1"; setTimeout(showSlides, 3000); // 设置轮时间间隔(毫秒) } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值