微信小程序的swiper组件中只能放置swiper-item，而鸿蒙js的swiper组件中可以放置除list之外的任意组件，功能更强大。除之前讲过用swiper结合自定义tabbar实现底部菜单分页功能，swiper最常用的就是首页的轮播图了。
swiper的属性可见官方文档（https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-swiper-0000000000611533），开发者工具在duration属性的代码提示是有bug的，这里应填的是毫秒数：
代码中swiper的后四个属性所填的都是默认值，可以省略。
2、image-animator幻灯片
swiper是滚动轮播图的效果，image-animator组件提供了类似幻灯片一样的图片切换效果。它不支持任何的子组件，且只支持图片。官方文档（https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-animator-0000001050066126）。
image-animator的duration属性与swiper的duration属性不同，它支持给定单位，不给单位默认为ms。且文档中写的“单次播放时长”其实是一次播放完所有图片的时长，每张图片的显示时长被均分。
<image-animator duration="8s" images="{{ animatorImg }}"></image-animator>images数组格式：
"animatorImg": [ { "src": "newyear1.jpeg" }, { "src": "newyear2.jpeg" }, { "src": "newyear3.jpeg" }, { "src": "newyear4.jpeg" } ],支持设置fixedsize="false"，即可在数组中指定每幅图片的长、宽、偏移量。
<image-animator duration="8s" images="{{ animatorImg }}" fixedsize="false"></image-animator> "animatorImg": [ { "src": "newyear1.jpeg", "width": 500, "height": 500 }, { "src": "newyear2.jpeg" }, { "src": "newyear3.jpeg" }, { "src": "newyear4.jpeg", "width": 400, "height": 400, "top": 100, "left": 100 } ],3、marquee跑马灯
marquee组件提供了一种跑马灯的文字效果，文字从屏幕右侧开始出现，并向屏幕左侧滚动。适合做滚动通知，或是手表类的布局。
<marquee> {{ text }} </marquee>整体代码和效果图：
hml:
<div> <swiper autoplay="true" duration="1000" interval="3000" indicator="true" loop="true" vertical="false"> <block for="{{ swipeImg }}"> <image src="{{ $item }}"></image> </block> </swiper> <marquee> {{ text }} </marquee> <image-animator duration="8s" images="{{ animatorImg }}" fixedsize="false"></image-animator> </div>