首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android实现图片滚动控件,含页签功能

关注特效的人一定都会发现,不管是网站还是手机客户端,主页上都会有一个图片滚动播放器,上面展示一些它推荐的商品。这个几乎可以用来冠名的功能,看起来还是挺炫的,我们今天就来实现一下。...今天仍然还是实现一个自定义控件,然后我们在任意Activity的布局文件中引用一下,即可实现图片滚动器的效果。...第一个LinearLayout中要放入需要滚动显示的图片,这里我们加入了四个Button,每个Button都设置了一张背景图片。...然后手指在图片上滑动,我们可以看到图片滚动的效果: ? 不停的翻页,页签也会跟着一起改变,下图中我们可以看到高亮显示的点是变换的: ? 恩,对比一下客户端的效果,我觉得我们模仿的还是挺好的。...原来图片并不会自动播放。。。。。 没关系,我在后面的一篇文章中补充了自动播放这个功能,而且不仅仅是自动播放功能喔,请参考 Android图片滚动,加入自动播放功能,使用自定义属性实现,霸气十足!

1.7K100
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android高级图片滚动控件,编写3D版的图片轮播器

    说到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻、淘宝等。...,每当有图片滚动时会回调此接口。...,当手指离开屏幕时会距离当前滑动的距离和速度来决定,是滚动到下一张图片,还是滚动到上一张图片,还是滚动回原图片。...在scrollToNext()方法中会先计算一下还需滚动的距离,然后进行一下边界检查,防止当前图片的下标超出合理范围,接着会调用beginScroll()方法来进行滚动。...其实就是遍历了一下每个Image3DView控件,然后调用它的setRotateData()方法,并把图片的下标和滚动距离传进去,这样每张图片就知道应该如何进行旋转了。

    3.9K81

    元素滚动高度和图片懒加载

    二、元素滚动高度 当一个元素的内容多,高度超出他所在的容器高度,会出现滚动条 1、element.scrollHeight 元素滚动内容的总长度 element.scrollHeight 元素滚动内容的总长度...如果元素没出现滚动条, scrollHeight等于 clientHeight 2、element.scrollTop 滚动的高度 元素滚动的距离 3、window.innerHeight 窗口的高度...如果想学习懒加载的朋友,建议直接观看这篇文章实现图片懒加载(Lazyload),这篇文章写得很好, 懒加载主要是使用于图片比较多的情况,一次性加载所有的图片会给服务器比较大的压力,加载比较慢,所以我们先不加载未出现在页面可视区域内的图片...,等到滚动到可视区域后再去加载。...滚动时offset的值,offset().top为元素距离页面内容的高度 ? 3、把图片data-src换成src值 <!

    1.6K20

    requestAnimationFrame实现单张图片无缝持续滚动

    背景 在很久以前,有写过一个使用 js 实现单张图片持续滚动图片的 代码,但那一版实现会持续操作DOM,向DOM中插入元素,性能较差,最近发现 requestAnimationFrame 通过 动画的方式实现图片滚动更加方便...效果如下 需求描述 需要单张图片在可视区域内无缝持续向上滚动或向左滚动,由于向下和向右属于反着坐标轴移动图片,和正常DOM元素插入展示顺序也相反,遂不考虑此种场景。 代码实现 图片轮播 // pause:暂停图片轮播 // imgWrap:图片容器,放置多张图片,整体进行滚动...2022.03.09 更新 2、发现在有些场景下图片onload事件触发之后,依然获取不到图片宽高,而上面我们图片滚动是依赖图片的宽高的,这里需要再加个定时器,轮询获取图片宽高,当确实可以获取到宽高之后...0的边界长度 let boundaryValue = 0; // 是否可以执行滚动动画,保证获取到图片真实宽高之后再开始滚动,否则获取不到宽高,始终不会滚动 let canScroll

    3.5K20

    setInerval实现图片滚动离开页面后又返回页面时图片加速滚动问题解决

    问题: setInerval实现图片滚动,离开页面后又返回页面时图片加速滚动 代码本身实现方案: 在每次页面加载的时候会清除定时器。...问题产生原因: 由于在加载了图片滚动的页面之后,又去到了其他页面,但是定时器没有停止,而页面又没有显示在用户面前,当返回页面的时候,就会把之前定时器中已经移动的图片动画一股脑移动,就会出现如题所述加速滚动的效果...设计图样式,停留3s slider(imageRealHeight, 4000, "roll-animation-1") } else { // 不停留,直接滚动...(scrollTimer) //清除定时器 console.log("失去焦点"); } else { //页面聚焦时开启定时器,即重新初始化banner图片滚动...visibilityChange事件 document.addEventListener(visibilityChange, handleVisibilityChange, false); } // 图片向上滚动

    1.2K10
    领券