大部分网站或者APP banner处都会放置几张图片进行轮播,很多插件也都有这个效果,APICloud提供的UIScrollPicture模块就可以轻松实现图片录播的效果。
1、先从模块库中找到UIScrollPicture并添加到app中;
2、在代码中使用UIScrollPicture:
var UIScrollPicture = api.require('UIScrollPicture'); UIScrollPicture.open({ rect: { x: 0, y: 80, w: api.winWidth, h: 185.6 }, data: { paths: [ 'widget://images/1.png', 'widget://images/2.jpg', 'widget://images/3.jpg' ] }, styles: { caption: { height: 35, color: '#E0FFFF', size: 13, bgColor: '#696969', position: 'bottom' }, indicator: { align: 'center', color: '#FFFFFF', activeColor: '#DA70D6', } }, contentMode: 'scaleToFill', interval: 3, loop: true, fixedOn: api.frameName, fixed: false }, function(ret, err) { if (ret) { //alert(JSON.stringify(ret)); } else { alert(JSON.stringify(err)); } });
以上例子是我的项目中用到的,这里也不多说各个参数的用法,想了解的可以去官网上看。
我这里说一下这个控件存在的一个问题。
上面说过,这个图片轮播的效果是放在banner的位置,而banner上面有个导航栏,并且这个导航栏像“冻结的窗口一样冻结了,不随着滚动条的滚动而滚动”,它永远显示在最顶端(即position=fixed)。
当页面上不添加这个控件时,滚动条如何滚动导航栏都不会变化。若是加入了这个控件,当banner的图片滚动到导航栏的时候,导航栏消失了等图片滚过去了,导航栏又出现了。而banner下边的内容继续滚动,导航栏依旧不会变化。
看这个效果有点像:banner把导航栏挡住了,用css的效果来说就是banner的z-index比导航栏的要大,所以banner显示在上面,能够遮住导航栏。
根据这个思路去解决,将导航栏所在div的z-index调大(测试时调到了10000),问题依旧存在。
然后修改了导航栏的position改成relative,问题倒是解决了,可是导航栏也不固定在最顶端,而是随着滚动条滚的看不见了,这不符合要求。
查看APICloud官网的说明文档,发现fixed好像跟这个有关系,这个属性官网的说明如下:
fixed:模块是否随所属 window 或 frame 滚动,默认值:true(不随之滚动)
最开始测试时故意将fixed改成了false,结果不符合要求,修改成true之后,banner不滚动了,导航栏也冻住了,,也就是导航栏和banner都不动了只有页面内容滚动。虽说这个效果比上面的效果好,但是看起来太变扭了,还是不符合要求。
最后想来想去,想到了一个方法:导航栏和banner是处于同一个页面的,但是banner效果好像在导航栏的上层且不能修改它们的层级关系,我要是在当前重新开一个frame它是不是就可以浮到banner的上面而不再受banner的影响了呢。
想到之后就测试了一下,以下为测试代码:
api.openFrame({ name: 'header_frame', url: 'public/header.html', rect: { x:0, y:0, w:api.winWidth, h:80 } });
如此之后,果然不受影响了,且符合要求。
原本以为这个问题算是完美的解决了,今天为页面添加了下拉刷新功能之后,别的页面的刷新动画都是在页面的最顶端显示,这个页面的动画却是在导航栏和banner之间显示,很不协调。目前还没有想到解决的办法,哪位同僚要是有好的办法,请务必留言告知,不胜感激!
最后,祝好运!
相关推荐
网页图片轮换是一种常见的网页设计技术,用于在页面上展示多张图片并自动进行定时切换,以创造出动态的视觉效果。这种技术可以用于网站的广告展示、产品展示或者背景图片等场景,使得用户无需手动操作就能看到不同的...
当导航栏的某个选项被选中或轮换到时,页面的背景图片或颜色也会相应改变,创造出一致且动态的用户体验。这通常通过CSS3的`background-image`或`background-color`属性配合JavaScript实现。 3. **内容轮换**: ...
【正文】 在IT行业中,网页元素的动态效果是提升用户体验的重要手段之一,"超级Marquee"就是这样...通过巧妙地运用CSS和JavaScript,开发者可以创建出既有吸引力又易于使用的图片导航和轮换效果,提升网站的整体体验。
在网页设计中,图片轮换是一种常见的视觉效果,用于展示多张图片并自动切换,以吸引用户注意力。jQuery,作为一款强大的JavaScript库,为实现这一功能提供了丰富的API和插件支持。本文将深入探讨如何使用jQuery实现...
本文将详细讲解如何实现一个4张图片轮换切换的导航,适用于各种Web项目。 首先,我们需要理解这个功能的核心原理:通过定时器(如JavaScript的setInterval)来定期更改显示的图片,并配合CSS动画实现平滑过渡效果。...
2. 图片轮换:也称为图片幻灯片,是网页上一组图片按照特定顺序自动切换显示,通常配合过渡效果和导航控制,以实现动态展示。 二、jQuery图片轮换实现原理 1. 动态修改CSS属性:利用jQuery的`.css()`方法,可以...
通常,我们会把所有图片放在一个`<div>`元素中,并设置它们的初始状态为隐藏,以便后续通过JavaScript进行控制。例如: ```html <!-- 更多图片... --> ``` CSS则是负责样式和布局的部分。我们可以设定图片...
1. **初始化设置**:插件在页面加载完成后自动运行,首先获取所有待轮换的图片元素,并根据用户设定的参数进行配置,如切换间隔时间、过渡效果等。 2. **隐藏多余图片**:除第一张图片外,其他图片在初始状态下会被...
1. 图片轮换:图片轮换,又称幻灯片效果或滑动展示,是一种在网络页面上展示多张图片的方式,通过定时切换或者用户触发事件来呈现不同的图片。这种技术常用于首页焦点图、产品展示、新闻更新等场景,能够有效利用...
在网页设计中,图片轮换效果常常用于展示一组图片,以吸引用户注意力并提供动态的视觉体验。这种效果通常被称为焦点图,它能够自动或手动切换显示不同的图片,提升用户体验。本文将深入探讨如何利用JavaScript(简称...
在网页设计中,为了吸引用户的注意力并展示多样化的信息,图片轮换效果是一个常见的功能。传统的实现方式是使用Adobe Flash技术,但随着HTML5和CSS3的发展,现在我们可以使用纯CSS来实现类似的效果,无需依赖Flash...
在JavaScript开发领域,创建一个仿FLASH的图片轮换播放器是一项常见的挑战,它涉及到动态内容展示、用户交互和视觉效果的实现。这个实例是利用JavaScript的灵活性和强大的DOM操作能力,来模拟曾经广泛使用的FLASH...
【标题】:“四屏flash图片轮换代码.zip_四屏flash图片轮换代码”这个压缩包文件主要包含了一个实现四屏展示的Flash图片轮播效果的代码资源。四屏指的是在网页设计中,同时在四个独立区域显示不同图片的布局方式,这...
1. **图片轮换**:这是一种常见的网页设计技术,用于在页面上展示一组图片,并以自动或用户触发的方式进行切换。这种效果能提高用户体验,使网站更具吸引力。 2. **JavaScript(JS)**:JS是网页开发中的主要脚本...
"很好的图片轮换效果有JS" 这个标题表明我们将探讨的是使用JavaScript实现的图片轮换特效。JavaScript是一种广泛使用的客户端脚本语言,它能够使网页具有交互性,而图片轮换正是这种交互性的体现。 图片轮换效果...
4. **初始化插件**:在文档加载完成后,使用jQuery选择器找到图片容器,并调用插件方法进行初始化,例如`$('.imageContainer').imageChange();` 5. **配置参数**:如果需要,可以传入配置对象来定制插件行为,例如`$...
6. 停止/恢复轮换:根据需求,可能还需要添加停止和恢复轮换的函数。这可以通过清除定时器实现。 ```javascript function stopRotation() { clearTimeout(imageTimer); } function resumeRotation() { ...
以下将详细介绍如何使用JavaScript来创建一个图片轮换的效果,并提供相关的知识点。 首先,我们需要了解基本的HTML结构,用于展示图片轮换。通常,我们会创建一个包含多张图片的`<div>`元素,每张图片都是`<img>`...
标题“图片轮换带swf”指的是一个...不过,随着HTML5和移动设备的普及,Flash已经逐渐被淘汰,现在的图片轮换更倾向于使用HTML、CSS和纯JavaScript(或者框架如Vue、React等)来实现,以确保更好的跨平台兼容性和性能。
在本场景中,"ASP读取数据库图片轮换"是一个功能,它涉及到使用ASP技术从数据库中读取图片,并在网页上实现动态的图片轮换效果,类似于幻灯片展示。这种效果通常会使用到JavaScript或者Flash技术来增强用户体验,...