IOS实现图片轮播无限循环效果

本文接着上篇文章进行叙述讲解，主要为大家分享了图片轮播无限循环效果的实现方法，具体内容如下

之前说到第一个问题，ScrollView移动到最后一张图片时无法移动了，这是因为ScrollView已经移动到最后，而图片又是依次排列，自然也就无法移动。

解决办法是，我们换一个思路实现图片轮播效果，ScrollView上只放三个ImageView，屏幕始终显示中间的ImageView，左边和右边的ImageView分别代表前一张图片和后一张图片，屏幕移动的时候，中间的ImageView变化，同时左右两边的ImageView也随之变化，两种边界情况：

（1）当屏幕显示最后一张图片时，右边的ImageView也即下一站图片应该是最开始的第一张图片；

（2）当屏幕显示最开始的第一张图片时，左边的ImageView也即上一张图片应该是最后一张图片。

这样三个ImageView不断变化就造成一种图片轮播无限循环的效果。 参考：http://www.jb51.net/article/81034.htm

相对于之前的效果，有一些改变,主要有：

（1）ScrollView只需要设置三个ImageView即可，并且默认显示中间的ImageView

（2）根据ScrollView的移动情况，迅速变化三个ImageView中图片数据

（3）ImageView更新完毕后，偷偷把ScrollView拉回到中间的ImageView位置，这样视觉效果上就实现了无限循环的效果

效果图：

但是，这里在加入定时器后实现图片轮播自动循环时遇到了问题，主要是初始化显示第一张图片与根据定时器设置自动移动ScrollView有一些冲突，在code4App上找到其他人一个工程，采用的思路相同，单独封装了ScrollView进行处理，已经解决该问题。

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • IOS使用UICollectionView实现无限轮播效果

    IOS使用UICollectionView实现无限轮播效果

    一.案例演示 本案例Demo演示的是一个首页轮播的案例,支持手动轮播和自动轮播.知识点主要集中在UICollectionView和NSTimer的使用. 二.知识储备 2.1.UICollectionView横向布局 只需要设置UICollectionViewFlowLayout的scrollDirection为UICollectionViewScrollDirectionHorizontal即可. 2.2.NSTimer的基本使用 NSTimer的初始化: 复制代码 代码如下: + (NSTi

  • iOS仿热门话题热点轮播界面tableView

    iOS仿热门话题热点轮播界面tableView

    废话不多说直接上代码: 这个功能应该是挺常见的, 一个tableView到另一个tableView, 类似segment的一个东西, 我把它封装起来了: // // ViewController.m // // // Created by 高雅馨 on 16/6/3. // Copyright © 2016年 高雅馨. All rights reserved. // #import "DCNavTabBarController.h" #import "HTMacro.h&qu

  • iOS实现无限循环图片轮播器的封装

    项目中很多时候会碰到这个需求,实现多张图片的无限循环轮转,以前做过,项目中几个地方的都用到了,当时没有封装,几个地方都拷贝几乎一样的代码,代码复用性不好,今天没事封装了一下,使用起来比较简单. 首先,说说我实现循环轮转图片的思想,在UIScrollView中添加了3个UIImageView,并排排列,我们看到的永远只是第二个UIImageView,这样的话,你一直可以向左,向右滑动,当你向左滑动是,这是你滑动到了最后一个UIImageView不能在向左边滑动了,这时,我在后面悄悄的将第二个UII

  • 一行iOS代码实现图片无限轮播器

    一行iOS代码实现图片无限轮播器

    最近一直在找实现图片无限轮播的方法,在网上也看了不少方法,大都不太合适,最终看到某IT培训公司一位讲师用 UICollectionView:一行代码实现图片无限轮播器的方法,当然想一行代码实现轮播功能,前期还是有一些工作要做.下面就把这个方法分享给大家! 一.图片无限轮播实现效果图: 图片无限轮播.gif 二.实现原理与分析: 假设有三张图片0.1.2,想要实现无限轮播,我们可以将UICollectionView的cell个数设为图片的个数 x 3,也就是把三张图片重复添加到9个cell中,可以

  • IOS图片无限轮播器的实现原理

    首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell. 滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到+1,或者-1,来让图片的索引加1或者减1,实现图片的切换. 声明一个全局变量index来保存图片的索引,用来切换显示在当前cell的图片. 在滚动前先让显示的cell的脚标变为1.代码viewDidLoad中设置 完成一次滚动结束后,代码再设置当前的cell为第二个cell(本质上就是让当前显示的

  • iOS实现图片轮播效果

    iOS实现图片轮播效果

    本文实例为大家分享了IOS图片轮播效果的实现过程,供大家参考,具体内容如下 平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是ScrollView这种方式. 1.图片轮播效果实现 主要实现思路是:根据图片总数及宽高设置好ScrollView的大小,每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为,并加入定时器,实现自动轮播. 如图所示,

  • iOS开发中使用UIScrollView实现图片轮播和点击加载

    iOS开发中使用UIScrollView实现图片轮播和点击加载

    UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 复制代码 代码如下: #import "YYViewController.h" @interface YYViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; /**  *  页码  */ @pro

  • iOS实现轮播图banner示例

    楼主项目中需要有一个轮播图,因为比较简单,就自己写了个,因为是从网上弄得图片 所以用了SDWebImage 这个三方库 当然自己也可以去掉 类型后面有*号 如用使用 请自行加上..... 代码:.h 文件 @protocol TJXViewDelegate<NSObject> //判断点击的那个 -(void)sendImageName:(TJXView *)TJXView andName:(NSInteger)selectImage; @end @interface TJXView : UI

  • IOS实现图片轮播无限循环效果

    IOS实现图片轮播无限循环效果

    本文接着上篇文章进行叙述讲解,主要为大家分享了图片轮播无限循环效果的实现方法,具体内容如下 之前说到第一个问题,ScrollView移动到最后一张图片时无法移动了,这是因为ScrollView已经移动到最后,而图片又是依次排列,自然也就无法移动. 解决办法是,我们换一个思路实现图片轮播效果,ScrollView上只放三个ImageView,屏幕始终显示中间的ImageView,左边和右边的ImageView分别代表前一张图片和后一张图片,屏幕移动的时候,中间的ImageView变化,同时左右两边

  • js图片轮播手动切换效果

    js图片轮播手动切换效果

    利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot

  • 原生JS实现图片轮播与淡入效果的简单实例

    最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会

  • jquery实现图片轮播和滑动效果

    jquery实现图片轮播和滑动效果

    本文实例为大家分享了jquery实现图片轮播和滑动效果的具体代码,供大家参考,具体内容如下 实习做了一个简易的图片轮播效果 下图是做出来的效果 源码 html 和 js部分 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link type="text/css" rel="sty

  • iOS实现图片轮播器

    iOS实现图片轮播器

    有时候肯能会用到图片轮播器,做广告的效果.下面详细介绍iOS如何实现图片轮播器 1.新建一个项目,导入5张图片(为了代码方便,我把图片命名规范了,其实无所谓) 2.在mainstoryboard中拖入ScrollView和Page Control(也可以代码写,或者是自定义xib) 设置page control的 Current Page属性,决定轮播的当前页显示的颜色 3.接下来就是正式代码了 //(1)将需要展⽰的内容添加到UIScrollView中 //(2)设置UIScrollView的

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • Android实现带指示点的自动轮播无限循环效果

    想要实现无限轮播,一直向左滑动,当到最后一个view时,会滑动到第一个,无限- 可以自己写ViewPager然后加handler先实现自动滚动,当然这里我为了项目的进度直接使用了Trinea的Android-auto-scroll-view-pager库,网址:点击进入github 引用库compile('cn.trinea.android.view.autoscrollviewpager:android-auto-scroll-view-pager:1.1.2') { exclude modu

  • JS组件Bootstrap实现图片轮播效果

    JS组件Bootstrap实现图片轮播效果

    本文主要来学习一下JavaScript插件--轮播.废话不多说,直接进入学习.完整教程可查看:Bootstrap3.0教程 轮播 下面先来展示的就是此插件和相关组件制作的轮播案例. <body style="width:900px; margin-left:auto; margin-right:auto;"> <div id="carousel-example-generic" class="carousel slide" da

  • 非常棒的jQuery图片轮播效果

    非常棒的jQuery图片轮播效果

    本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下 购物产品展示:图片轮播器,效果如下所示: 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:    最外层容器区域,如上图红色线框矩形    选项卡区域 两个事件:     鼠标悬浮或鼠标划入mouseover     鼠标离开mouseleave /**大屏广告滚动样式**/ <!DOCTYPE html> <html lang="en"> <head> &l

随机推荐