本文出自code4app,原文地址:http://www.code4app.com/blog-...

轮翻播放与查看是分开的,轮翻是是用 开源的SDCycleScrollView

这里是给出的是查看的:

  FullScreenShowImageView.swift//  joopic  Created by jianxiong li on 16/9/27.//  Copyright © 2016年 joobot. All rights reserved.//import Foundation
import UIKit//图片轮播组件代理协议protocol FullScreenShowImageViewDelegate{    //获取数据源func galleryDataSource()->[String]    //获取内部scrollerView的宽高尺寸func galleryScrollerViewSize()->CGSizefunc hiddenForCliked(index:Int)
}//图片轮播组件控制器class FullScreenShowImageView: UIView,UIScrollViewDelegate{    //代理对象var delegate : FullScreenShowImageViewDelegate!    //屏幕宽度let kScreenWidth = BWidth    //当前展示的图片索引var currentIndex : Int = 0//数据源var dataSource : [String]?    //用于轮播的左中右三个image(不管几张图片都是这三个imageView交替使用)var leftImageView , middleImageView , rightImageView : UIImageView?    //放置imageView的滚动视图var scrollerView : UIScrollView?    //scrollView的宽和高var scrollerViewWidth : CGFloat?var scrollerViewHeight : CGFloat?    //页控制器(小圆点)var pageControl : UIPageControl?    //加载指示符(用来当iamgeView还没将图片显示出来时,显示的图片)var placeholderImage:UIImage!    //自动滚动计时器var autoScrollTimer:NSTimer?init(frame: CGRect,delegate:FullScreenShowImageViewDelegate) {        super.init(frame: frame)        self.delegate = delegatepraperaUI()}required init?(coder aDecoder: NSCoder) {fatalError("init(coder:) has not been implemented")}func praperaUI() {        //获取并设置scrollerView尺寸let size : CGSize = self.delegate.galleryScrollerViewSize()        self.scrollerViewWidth = size.widthself.scrollerViewHeight = size.height//获取数据self.dataSource =  self.delegate.galleryDataSource()        //设置scrollerViewself.configureScrollerView()        //设置加载指示图片self.configurePlaceholder()        //设置imageViewself.configureImageView()        //设置页控制器self.configurePageController()        //设置自动滚动计时器//self.configureAutoScrollTimer()self.backgroundColor = UIColor.blackColor()        self.addTapAction()}func addTapAction(){        //添加组件的点击事件let tap = UITapGestureRecognizer(target: self,action: #selector(FullScreenShowImageView.handleTapAction(_:)))self.addGestureRecognizer(tap)}    //点击事件响应func handleTapAction(tap:UITapGestureRecognizer)->Void{        //获取图片索引值self.delegate.hiddenForCliked(self.currentIndex)        self.dismissViewAnimate()}func presentViewAnimate() {let fr = self.middleImageView?.frameself.middleImageView?.frame = CGRect(x: fr!.origin.x, y: 22, width: fr!.width, height: fr!.height)        UIView.animateWithDuration(10, animations: {            self.middleImageView?.frame = fr!}) { (_) in}}func dismissViewAnimate() {let fr = self.middleImageView?.frameself.middleImageView?.frame = CGRect(x: fr!.origin.x, y: fr!.origin.y - StatusAndNavHeight, width: fr!.width, height: fr!.height)        UIView.animateWithDuration(10, animations: {            self.middleImageView?.frame = CGRect(x: fr!.origin.x , y: -42, width: fr!.width, height: fr!.height)}) { (_) in            self.hidden = trueself.middleImageView?.frame = fr!}}  //设置scrollerViewfunc configureScrollerView(){        self.scrollerView = UIScrollView(frame: CGRect(x: 0,y: 0,width: self.scrollerViewWidth!, height: BHeight))        self.scrollerView?.backgroundColor = UIColor.blackColor()        self.scrollerView?.delegate = selfself.scrollerView?.contentSize = CGSize(width: self.scrollerViewWidth! * 3,height: BHeight)        //滚动视图内容区域向左偏移一个view的宽度self.scrollerView?.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)        self.scrollerView?.pagingEnabled = trueself.scrollerView?.bounces = falseself.addSubview(self.scrollerView!)}    //设置加载指示图片func configurePlaceholder(){        //这里我使用ImageHelper将文字转换成图片,作为加载指示符let font = UIFont.systemFontOfSize(17)// UIFont.systemFont(ofSize: 17.0, weight: UIFontWeightMedium)let size = CGSize(width: self.scrollerViewWidth!, height: self.scrollerViewHeight!)placeholderImage = UIImage(named: "图片加载中...")}    //设置imageViewfunc configureImageView(){        self.leftImageView = UIImageView(frame: CGRect(x: 0, y: (BHeight-scrollerViewHeight!)/2,width: self.scrollerViewWidth!, height: self.scrollerViewHeight!))        self.middleImageView = UIImageView(frame: CGRect(x: self.scrollerViewWidth!, y: (BHeight-scrollerViewHeight!)/2,width: self.scrollerViewWidth!, height: self.scrollerViewHeight! ));        self.rightImageView = UIImageView(frame: CGRect(x: 2*self.scrollerViewWidth!, y: (BHeight-scrollerViewHeight!)/2,width: self.scrollerViewWidth!, height: self.scrollerViewHeight!));        self.scrollerView?.showsHorizontalScrollIndicator = falseself.leftImageView?.contentMode = UIViewContentMode.ScaleAspectFitself.middleImageView?.contentMode = UIViewContentMode.ScaleAspectFitself.rightImageView?.contentMode = UIViewContentMode.ScaleAspectFit//设置初始时左中右三个imageView的图片(分别时数据源中最后一张,第一张,第二张图片)if(self.dataSource?.count != 0){resetImageViewSource()}        self.scrollerView?.addSubview(self.leftImageView!)        self.scrollerView?.addSubview(self.middleImageView!)        self.scrollerView?.addSubview(self.rightImageView!)}    //设置页控制器func configurePageController() {        self.pageControl = UIPageControl(frame: CGRect(x: kScreenWidth/2-60,y: BHeight - 30, width: 120, height: 20))        self.pageControl?.numberOfPages = (self.dataSource?.count)!        self.pageControl?.userInteractionEnabled = falseself.addSubview(self.pageControl!)}    //设置自动滚动计时器func configureAutoScrollTimer() {        //设置一个定时器,每三秒钟滚动一次autoScrollTimer  = NSTimer.scheduledTimerWithTimeInterval(3, target: self, selector: #selector(SliderGalleryController.letItScroll), userInfo: nil, repeats: true)}    //计时器时间一到,滚动一张图片func letItScroll(){let offset = CGPoint(x: 2*scrollerViewWidth!, y: 0)        self.scrollerView?.setContentOffset(offset, animated: true)}    //每当滚动后重新设置各个imageView的图片func resetImageViewSource() {        //当前显示的是第一张图片if self.currentIndex == 0 {            self.leftImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.last!))            self.middleImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.first!))let rightImageIndex = (self.dataSource?.count)!>1 ? 1 : 0 //保护self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![rightImageIndex]))}            //当前显示的是最后一张图片else if self.currentIndex == (self.dataSource?.count)! - 1 {            self.leftImageView?.sd_setImageWithURL(NSURL(string:self.dataSource![self.currentIndex-1]))            self.middleImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.last!))            self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.first!))}            //其他情况else{            self.leftImageView?.sd_setImageWithURL(NSURL(string:self.dataSource![self.currentIndex-1]))            self.middleImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![self.currentIndex]))            self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![self.currentIndex+1]))}        //设置页控制器当前页码self.pageControl?.currentPage = self.currentIndex}    //scrollView滚动完毕后触发func scrollViewDidScroll(scrollView: UIScrollView) {        //获取当前偏移量let offset = scrollView.contentOffset.xif(self.dataSource?.count != 0){            //如果向左滑动(显示下一张)if(offset >= self.scrollerViewWidth!*2){                //还原偏移量scrollView.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)                //视图索引+1self.currentIndex = self.currentIndex + 1if self.currentIndex == self.dataSource?.count {                    self.currentIndex = 0}}            //如果向右滑动(显示上一张)if(offset <= 0){                //还原偏移量scrollView.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)                //视图索引-1self.currentIndex = self.currentIndex - 1if self.currentIndex == -1 {                    self.currentIndex = (self.dataSource?.count)! - 1}}            //重新设置各个imageView的图片resetImageViewSource()}}    //手动拖拽滚动开始func scrollViewWillBeginDragging(scrollView: UIScrollView) {        //使自动滚动计时器失效(防止用户手动移动图片的时候这边也在自动滚动)//autoScrollTimer?.invalidate()}    //手动拖拽滚动结束func scrollViewDidEndDragging(scrollView: UIScrollView,willDecelerate decelerate: Bool) {        //重新启动自动滚动计时器//configureAutoScrollTimer()}
}

如何使用:

var sliderGallery : FullScreenShowImageView!    var bannerCurrentIndex:Int = 0//图片轮播组件协议方法:获取内部scrollView尺寸func galleryScrollerViewSize() -> CGSize {        return CGSize(width: BWidth, height: BHeight/2)}    //图片轮播组件协议方法:获取数据集合func galleryDataSource() -> [String] {        return self.bannerView.imageURLStringsGroup as! [String]}    //点击事件响应func hiddenForCliked(index:Int){        if(bannerCurrentIndex != index){             self.bannerView.scrollToIndex(Int32(index))}        self.navigationController?.setNavigationBarHidden(false, animated: false)}func showImageGallery(index:Int){        //初始化图片轮播组件if(sliderGallery == nil){sliderGallery = FullScreenShowImageView(frame: CGRect(x: 0, y: 0, width: BWidth,height: BHeight),delegate:self)sliderGallery.currentIndex = indexsliderGallery.resetImageViewSource()            //将图片轮播组件添加到当前视图self.view.addSubview(sliderGallery)}else{sliderGallery.currentIndex = indexsliderGallery.resetImageViewSource()sliderGallery.hidden = false}        self.sliderGallery.presentViewAnimate()        self.navigationController?.setNavigationBarHidden(true, animated: false)}    //pragma -- SDCycleScrollViewDelegatefunc cycleScrollView(cycleScrollView: SDCycleScrollView!, didSelectItemAtIndex index: Int) {        print("--------index:(index)")bannerCurrentIndex = index       self.showImageGallery(index)}

iOS 开发商品详情页中的banner中点击查看图片相关推荐

  1. iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。

    上面的效果是商品详情页常用的两种模式,分页和不分页.首先请忽略博主懒得去写界面,真正的效果见下面: 不分页模式 分页模式 然后先来依次说明下原理: 分页模式:看着和下拉刷新上拉加载的时候像不像?没错, ...

  2. 微信小程序商城开发-商品详情页跳转购物车

    项目场景: 微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转) 问题描述 点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错 原因分析: 微 ...

  3. 商品详情页中,当鼠标放到小图上时,改变大图的图片为当前小图的图片

    在做商品详情页时,我们会遇到这样的问题,当鼠标移动到小图上的时候,所对应的大图也会随之改变,变成当前鼠标所在位置的小图图片,今天我给大家分享一下我的做法,希望对大家有所帮助,也希望得到大家的指点. / ...

  4. 仿淘宝商品详情页中(继续拖动到图文详情)

    参考文章http://www.jb51.net/article/91858.htm 核心view 有2个 一个是自定义的ViewGroup 一个是自定义的ScrollView 首先是自定义的Scrol ...

  5. 如何爬取商品详情页中的信息

    如下图,我们要爬取标题和价钱和区域等 1.导入库 from bs4 import BeautifulSoup import requests import time 2.抓取整个HTML网页(增加判断 ...

  6. 仿京东淘宝商品详情页中视频和图片的轮播功能

    还没有学会如何上传视频到博客上,先上传图片吧 案例下载地址: https://download.csdn.net/download/dawnzeng/10430298 视频播放借用了饺子播放器,最主要 ...

  7. Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序,Thymeleaf快速入门,商品详情页的展示)

    Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...

  8. 商品详情页动态渲染系统:大型网站的多机房4级缓存架构设计

    124_大型电商网站的商品详情页的深入分析 之前,咱们也是说在讲解这个商品详情页系统的架构 缓存架构,高可用服务 商品详情页系统,我们只是抽取了其中一部分来讲解,而且还做了很大程度的简化 主要是为了用 ...

  9. 商品详情页整体架构介绍

    商品详情分为三部分,整体架构如下图: 依赖服务(源) -> MQ -> 动态渲染服务 -> 多级缓存 负载均衡 -> 分发层nginx -> 应用层nginx -> ...

最新文章

  1. LeetCode 中级 - 第k个排列(60)
  2. linux需要的GLIBCXX版本,Linux下GLIBCXX和GLIBC版本低造成的编译错误的解决方案
  3. 视达配色教程1 色彩是什么
  4. ReSharper2017.3的列对齐、排版格式、列对齐错误的修复
  5. python 并发编程实战_使用Python进行并发编程
  6. 分析方法论_用户生命周期的建立
  7. bi 工具 市场排行榜_2020年十大商业智能工具排行榜
  8. PTA 7-10 查询水果价格
  9. 三星s8是否支持html,真正的全面屏!国行三星S8终于支持导航栏隐藏
  10. kafka mysql 迁移,kafka迁移数据目录
  11. Linux 平台安装 VNC
  12. Win11保留的存储空间怎么关闭?Win11释放系统保留存储空间教程
  13. VB前传,从教学到游戏,再到系统,似乎每步都是精心设计
  14. python 加速度_「加速度公式」加速度公式1 - seo实验室
  15. Unity灯光(light)
  16. 【游戏开发实战】Unity手游第一人称视角,双摇杆控制,FPS射击游戏Demo(教程 | 含Demo工程源码)
  17. 2022-05-19 列式数据库-Clickhouse
  18. [XW大数据技术学习探讨] 公众号学习笔记
  19. 昨天搭完梯子之后就打不开12306查询的网页了
  20. html source type mp4,html5 – 获取MediaSource.isTypeSupported的mime类型

热门文章

  1. SVG描边动画实现过程
  2. 7段均衡器最佳参数_7段均衡器怎么调能达到最佳效果?
  3. bing每日壁纸官网获取
  4. 服务器托管之数据中心选型
  5. 【论文阅读】Underwater Image Enhancement: Using Wavelength Compensation and Image Dehazing(WCID)
  6. Angr 操作栈的符号执行 04_angr_symbolic_stack
  7. OI退役记,第五部分,CTSCAPIO2017
  8. Mobileye转变与芯片技术
  9. Access数据库文件HeroDB.MDB用什么工具可以打开呢?
  10. 关于Wrap Lighting与皮肤SSS