首页 技术 正文
技术 2022年11月20日
0 收藏 630 点赞 3,178 浏览 452 个字

淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现

工具/原料

 

  • axure7.0

方法/步骤

 

  1.  

    下载需要轮播的图片

    axure 动态面板实现图片轮播效果(淘宝)axure 动态面板实现图片轮播效果(淘宝)axure 动态面板实现图片轮播效果(淘宝)axure 动态面板实现图片轮播效果(淘宝)

  2.  

    将图片引入至axure中,将引入的第一张图片转为动态面板

    axure 动态面板实现图片轮播效果(淘宝)

  3.  

    将动态面板添加四个状态,分别为状态1,状态2,状态3,状态4,每个状态中添加上面的图片做背景

    axure 动态面板实现图片轮播效果(淘宝)

  4.  

    我们在页面处添加页面载入事件,使页面载入完成后,就开始不断的按顺序切换这个动态面板的状态,此时就可以看到图片如淘宝示例那样不断切换;接下来我们做一点有意思的事

    axure 动态面板实现图片轮播效果(淘宝)

  5.  

    添加四个矩形,设置选中组,选中后背景色变为橙色;透明度设置为50%

    axure 动态面板实现图片轮播效果(淘宝)axure 动态面板实现图片轮播效果(淘宝)axure 动态面板实现图片轮播效果(淘宝)

  6.  

    对所有矩形添加事件,当鼠标移入时,该矩形变为选中状态,图片轮播的动态面板状态切换为改矩形的状态;当鼠标移出是,该矩形变为未选中状态,图片继续按顺序切换这个图片轮播动态面板的状态

    axure 动态面板实现图片轮播效果(淘宝)

  7.  

    运行后,就有了类似淘宝的图片轮播的效果,而且,鼠标移入后右下角的矩形后,图片可变为矩形对应的图片,移出鼠标后,图片继续轮播

    axure 动态面板实现图片轮播效果(淘宝)END

注意事项

 

  • 轮播效果做起来只是这样,但是要想好看选图也十分重要,当然,这是ui的工作了
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,893
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,421
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,240
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,052
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,683
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,719