iOS实现图片轮播效果

本文实例为大家分享了IOS图片轮播效果的实现过程，供大家参考，具体内容如下

平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果，实现方式主要有两种，一种ScrollView+ImageView，另一种则是通过CollectionView，今天总结的是ScrollView这种方式。

1.图片轮播效果实现

主要实现思路是：根据图片总数及宽高设置好ScrollView的大小，每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为，并加入定时器，实现自动轮播。

如图所示，设置好ScrollView及PageControl，ScrollView的contentSize根据图片数量确定，注意启用pagingEnabled这个属性，确保整页移动，同样pageControl也是根据图片数量来确定，每一页代表一张图片。

图片命名采用数字序号方式，方便使用，需要注意的是，pageControl是由0开始的，也就是0对应image1，1对应image2...依次类推

加载图片并将准备好的图片在ScrollView里设置好位置，即将这些图片一张紧挨着一张排列在ScrollView中。

通过ScrollView的代理方法，在ScrollView滚动结束的时候根据contentOffset更新页码。

定时器设置，这里设置为每隔2秒滚动更新一次，实际上就是每隔2秒更新一次页码，根据页码的变化，让ScrollView跟着移动，每次移动一张图片的距离

这里还需要注意的是，由于加入定时器有自动轮播的效果了，会与手动拖拽ScrollView冲突，即手动拖拽ScrollView过程时ScrollView可能自动移动更新图片了，显然这种效果是不符合用户习惯的，这时需要在ScrollView的代理事件中进行处理，即开始拖拽ScrollView时停止定时器，拖拽结束后再开启定时器。

那到这里是不是就结束了呢？我们看看效果图：

这里有两个问题：

（1）首先是移动到最后一张图片时无法移动了，如果是制作APP的新特性页面，这样的滚动效果已经可以了，但如果在广告位或者是滚动新闻这些场景下这种效果是不够好的，一般滚动到最后一张图片时，继续拖拽都会移动到第一张图片，实现一种滚动循环效果。

（2）定时器自动轮播图片时，确实图片循环轮播了，但是仔细看会发现，ScrollView是由最后一种图片位置生硬得拉回到第一张图片的位置，效果也不够理想。

解决办法，小编先留个悬念，在下面的一篇文章中会进行解答，不要错过。

赞 (0)

相关推荐

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 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实现轮播图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变化,同时左右两边

  • iOS实现图片轮播效果

    iOS实现图片轮播效果

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

  • 使用JQuery实现图片轮播效果的实例(推荐)

    使用JQuery实现图片轮播效果的实例(推荐)

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元

  • 基于cssSlidy.js插件实现响应式手机图片轮播效果

    基于cssSlidy.js插件实现响应式手机图片轮播效果

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap

  • jQuery实现的图片轮播效果完整示例

    jQuery实现的图片轮播效果完整示例

    本文实例讲述了jQuery实现的图片轮播效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ list-

  • jQuery实现图片轮播效果代码

    jQuery实现图片轮播效果代码

    整理以前用jQuery实现的图片轮播效果. 1. 不做操作时,自动轮播  2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来  3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片  4. 手动轮播2:点击左右箭头也可以切换图片 效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了) 下面是代码区域: **inde.html部分代码** <div class="box"> <ul class="img">

  • JS仿hao123导航页面图片轮播效果

    hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ wi

  • Javascript实现图片轮播效果(一)让图片跳动起来

    Javascript实现图片轮播效果(一)让图片跳动起来

    图片轮播效果,在各大网站的首页都能看到,比较常见.下面小编给大家分享这一效果的简单实现. 1.图片跳动起来 2.图片序列控制的实现 3.前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • 图解js图片轮播效果

    图解js图片轮播效果

    本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下 两种图片轮播实现方案,先来看效果对比: 方案一: 原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张.这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯. 方案二: 实现原理示意图 原理: 1.轮播过程中,有几个关键元素:一个舞台(绿框).候场区(黑框).排队区(红框)和两个数组A和B.A用来保存正在展示和下一个将要展示的图片,如:图片1.2:B用来保存排队等

随机推荐