轮播器

1. .h

#import <UIKit/UIKit.h>

typedef void(^ClickImageBlock)(NSInteger currentIndex);


@interface LoopScrollView : UIView

- (instancetype)initWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray clickImage:(ClickImageBlock)clickImageBlock;

- (void)invalidateTimer;

@end


2. .m

//

//  LoopScrollView.m

//  轮播器

//

//  Created by 李文良 on 2017/4/20.

//  Copyright © 2017 王新伟. All rights reserved.

//

#define kWidth  self.frame.size.width

#define kHeight self.frame.size.height

#define kImageCount  3


#import "LoopScrollView.h"

#import "Masonry.h"

#import "UIImageView+WebCache.h"

@interface LoopScrollView()<UIScrollViewDelegate>

/**

 *滚动视图的控件

 */

@property(nonatomic,strong)UIScrollView* scroll;

/**

 *页码指示视图的控件

 */

@property(nonatomic,strong)UIPageControl* pageControl;

/**

 *显示左边图片的控件

 */

@property(nonatomic,strong)UIImageView* LeftImageView;

/**

 *显示中心图片的控件

 */

@property(nonatomic,strong)UIImageView* centerImageView;

/**

 *显示右边图片的控件

 */

@property(nonatomic,strong)UIImageView* rightImageView;

/**

 *保存图片的数组

 */

@property(nonatomic,strong)NSArray* imageArray;

/**

 *图片的当前下标索引

 */

@property(nonatomic,assign)NSInteger  currentIndex;

/**

 *图片总数

 */

@property(nonatomic,assign)NSInteger imageCount;


@property(nonatomic,strong)NSTimer *timer;


@property(nonatomic,copy)ClickImageBlock clickImageBlock;


@property(nonatomic,strong)UITapGestureRecognizer *tap;


@end

@implementation LoopScrollView


- (instancetype)initWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray clickImage:(ClickImageBlock)clickImageBlock

{

    self.imageArray = imageArray;

    self.imageCount = imageArray.count;

    self.clickImageBlock = clickImageBlock;

    return [self initWithFrame:frame];

}

- (instancetype)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self) {

        self.currentIndex=0;

        [self createScrollView];

        [self createImageView];

        [self createPageControl];

        [self setImageByIndex:self.currentIndex];

        self.timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(freshScroll) userInfo:nil repeats:YES];

        [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];


    }

    return self;

}


/**

 *以下是搭建UI界面的方法

 */


-(void)createScrollView

{

    self.scroll=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0,kWidth, kHeight)];

    self.scroll.backgroundColor=[UIColor redColor];

    self.scroll.showsHorizontalScrollIndicator=NO;

    self.scroll.showsVerticalScrollIndicator=NO;

    self.scroll.pagingEnabled=YES;

    self.scroll.bounces=NO;

    self.scroll.delegate=self;

    self.scroll.contentOffset=CGPointMake(kWidth, 0);

    self.scroll.contentSize=CGSizeMake(kWidth*kImageCount, kHeight);

    [self addSubview:self.scroll];

    self.tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapImage:)];

    [self.scroll addGestureRecognizer:self.tap];


}


-(void)createPageControl

{

    self.pageControl = [[UIPageControl alloc] init];

    self.pageControl.currentPageIndicatorTintColor=[UIColor redColor];

    self.pageControl.pageIndicatorTintColor=[UIColor blueColor];

    self.pageControl.enabled=YES;

    self.pageControl.numberOfPages = self.imageArray.count;

    [self addSubview:self.pageControl];

    [self.pageControl mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerX.equalTo(self.mas_centerX);

        make.bottom.equalTo(self.mas_bottom).offset(-5);

        make.width.mas_equalTo(60);

        make.height.mas_equalTo(20);

    }];

}

-(void)createImageView

{

    self.LeftImageView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, kWidth, 220)];

    [self.scroll addSubview:self.LeftImageView];

    

    self.centerImageView=[[UIImageView alloc]initWithFrame:CGRectMake(kWidth, 0, kWidth, 220)];

    [self.scroll addSubview:self.centerImageView];

    self.centerImageView.backgroundColor = [UIColor yellowColor];

    

    self.rightImageView=[[UIImageView alloc]initWithFrame:CGRectMake(2 * kWidth, 0, kWidth, 220)];

    [self.scroll addSubview:self.rightImageView];

}

#pragma mark------定时器

- (void)freshScroll

{

    [self scrollViewDidEndDecelerating:self.scroll];

}


#pragma mark-----点击图片

- (void)tapImage:(UITapGestureRecognizer *)tap

{

    if (self.clickImageBlock) {

        self.clickImageBlock(self.currentIndex);

    }

}


- (void)invalidateTimer

{

    [self.timer invalidate];

    self.timer = nil;

    [self.tap removeTarget:self action:@selector(tapImage:)];

}


#pragma mark ----刷新图片

-(void)refreshImage

{

    if (self.scroll.contentOffset.x>=kWidth) {

        self.currentIndex=((self.currentIndex+1)%self.imageCount);

    }

    else if(self.scroll.contentOffset.x<kWidth){

        self.currentIndex=((self.currentIndex-1+self.imageCount)%self.imageCount);

    }

    [self setImageByIndex:self.currentIndex];

}


#pragma mark ----该方法根据传回的下标设置三个ImageView的图片

-(void)setImageByIndex:(NSInteger )currentIndex

{

    NSString *currentImageUrl = self.imageArray[currentIndex];

    [self.centerImageView sd_setImageWithURL:[NSURL URLWithString:currentImageUrl] placeholderImage:nil];

    

    NSString *leftImageUrl = self.imageArray[((self.currentIndex-1+self.imageCount)%self.imageCount)];

    [self.LeftImageView sd_setImageWithURL:[NSURL URLWithString:leftImageUrl] placeholderImage:nil];

    

    NSString *rightImageUrl = self.imageArray[((self.currentIndex+1)%self.imageCount)];

    [self.rightImageView sd_setImageWithURL:[NSURL URLWithString:rightImageUrl] placeholderImage:nil];

    self.pageControl.currentPage=currentIndex;

}

#pragma mark ----UIScrollViewDelegate代理方法(停止加速时调用)

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

    [self refreshImage];

    self.scroll.contentOffset = CGPointMake(kWidth,0);

    self.pageControl.currentPage = self.currentIndex;

    NSLog(@"停止了加速,停在第%ld",self.pageControl.currentPage+1);

}


- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

{

    [self.timer invalidate];

    self.timer = nil;

}


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

{

    self.timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(freshScroll) userInfo:nil repeats:YES];

    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];


}



@end



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了实现Django图片轮播,你可以按照以下步骤进行操作: 1.在你的Django项目中创建一个名为“media”的文件夹,用于存储你的图片。 2.在你的项目根目录的urls.py文件中添加以下代码,以便在调试模式下提供对媒体文件的访问: ```python from django.conf import settings from django.conf.urls.static import static if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ``` 3.在你的应用程序中创建一个名为“models.py”的文件,并定义一个名为“Image”的模型,该模型将包含你要在轮播中显示的图像。例如: ```python from django.db import models class Image(models.Model): title = models.CharField(max_length=200) image = models.ImageField(upload_to='images/') def __str__(self): return self.title ``` 4.运行以下命令以创建数据库表: ```python python manage.py makemigrations python manage.py migrate ``` 5.在你的应用程序中创建一个名为“views.py”的文件,并定义一个名为“home”的视图,该视图将从数据库中检索所有图像并将它们传递给模板。例如: ```python from django.shortcuts import render from .models import Image def home(request): images = Image.objects.all() return render(request, 'home.html', {'images': images}) ``` 6.在你的应用程序中创建一个名为“templates”的文件夹,并在其中创建一个名为“home.html”的文件。在该文件中,你可以使用Bootstrap或其他CSS框架来创建一个轮播,并使用Django模板标记来循环遍历所有图像。例如: ```html <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> {% for image in images %} <li data-target="#carouselExampleIndicators" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active"{% endif %}></li> {% endfor %} </ol> <div class="carousel-inner"> {% for image in images %} <div class="carousel-item {% if forloop.first %}active{% endif %}"> <img class="d-block w-100" src="{{ image.image.url }}" alt="{{ image.title }}"> <div class="carousel-caption d-none d-md-block"> <h5>{{ image.title }}</h5> </div> </div> {% endfor %} </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> ``` 7.在你的应用程序中创建一个名为“urls.py”的文件,并定义一个名为“home”的URL模式,该模式将指向你在第5步中创建的视图。例如: ```python from django.urls import path from . import views urlpatterns = [ path('', views.home, name='home'), ] ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值