支持任意张图片轮播的逻辑函数
来源:互联网 发布:广东利为网络和多益 编辑:程序博客网 时间:2024/05/14 17:16
本例是在页面纵向展示两个图片,每次向上或向下滑动一张图片。
头部第一张图片向上滑,则直接滑到底部,同理,最后一张图片下滑,直接滑向顶部。
//因为只贴逻辑部分,所以解释一下变量// flag定义一个全局变量,用来保存当前位置,这里作为一个参数传给函数。//max 获取到的图片总个数,因为本例是展示两个图片,所有flag最大为max-2//_index 获取到的当前点击按钮(一共有两个按钮,一个向上翻,一个向下翻)//图片滚动原理:调节img的父容器的margin-top值,实现图片轮播function tp (flag,_index,max){ if(flag>0&&flag<max-2){ if(_index =="1"){ flag += 1; }else{ flag -= 1; } }else{ if(flag==0){ if(_index ==1){ flag += 1; }else{ flag=max-2; } }else{ if(_index =="1"){ flag=0; }else{ flag -= 1; } } }}
逻辑原理:
轮播开头与结尾和中间部分分开处理,中间图片可以直接上下操作,而两端的存在直接跳向末尾或者直接跳向头部,所以首先判断是否为中间部分,是则进行如下操作
if(flag>0&&flag<max-2){ if(_index =="1"){ flag += 1; }else{ flag -= 1; } }
如不是,则需要进一步判断是在头部还是在尾部,若在头部,向上跳转,直接跳向尾部,若在尾部,向下跳转,直接跳向头部,实现图片的循环跳转。
else{ //在头部 if(flag==0){ if(_index ==1){ flag += 1; }else{ //跳转尾部 flag=max-2; } }else{ //在尾部 if(_index =="1"){ //跳转头部 flag=0; }else{ flag -= 1; } }}
阅读全文
0 0
- 支持任意张图片轮播的逻辑函数
- 支持图片无限轮播的BannerLayout
- 自定义viewpager 三张图片在同一屏幕轮播的效果
- 任意张图片,循环百叶窗
- 支持任意手势动作的图片
- 图片轮播且可以实现5张翻页
- 利用多张图片制作轮播背景
- ionic+三张图片进行轮播+按钮
- XBanner支持图片无限轮播控件
- XBanner支持图片无限轮播控件
- XBanner支持图片无限轮播控件
- 图片的轮播
- 图片的轮播
- android无限轮播banner图片并且解决banner图片只有2张出现白板的情况,触摸即不轮播
- js的匿名函数及jQuery的图片轮播
- Pixable的架构如何支持每天2000万张图片?
- 支持图片无限轮播的BannerLayout,小圆点,提示栏,页码统统满足
- viewpager+timer实现图片轮播 两张图片轮播时出现空白页
- android LayoutParams和MarginLayoutParams
- 小球碰撞(NOIPD2T1难度)
- 求排列的逆序数
- python-filter
- 内核request_mem_region 和 ioremap的理解
- 支持任意张图片轮播的逻辑函数
- Spring Boot 启动加载数据 CommandLineRunner
- 函数指针的基本语法和回调函数
- linux内核之 phys_to_virt
- Qt c/C++ 混合编程,windows下的网络编程--udp封装(一)
- 字符设备驱动(二)
- Spring Boot mybati-plus .yml文件的配置文件
- 嵌入式每日学习心得2017.07.21
- 白平衡算法总结