美文网首页
京东首页海报轮播及手动切换

京东首页海报轮播及手动切换

作者: 阿阿小兰兰 | 来源:发表于2019-09-25 09:20 被阅读0次

    Axure学习从点滴开始!

    下面是海报轮播的简单实现方法,希望读该文章的你在产品路上又进步了一点。

    拖动一张图片到index中,并鼠标右键单击选择“转化为动态面板”。

    2.双击动态面板,添加2个state,共3个state。(这里只是以3个举例)。

    将每个state里面添加一张图片。

    3.回到index,点击动态面板,在右上角属性中选择“载入时”事件,并双击添加。

    选择弹出窗左侧的“设置动态面板”,点击设置参数。

    4.在index界面,在元件库里找到椭圆元件,将椭圆边框去掉,并设置合适的大小放在图片上,并复制三个一模一样的椭圆,分别编号为1,2,3。

    5.对椭圆进行设置交互样式,选中第一个椭圆,右键单击椭圆,选择“交互样式”中的“选中”下面的“填充颜色”。其它椭圆也一样操作。

    6.回到index,点击动态面板,选择属性中的“状态改变时”,并双击,弹出弹窗,点击添加条件。

    选择弹窗左侧“设置选中”,按照序号依次设置椭圆1,椭圆2,椭圆3的值是TRUEorFALSE。

    双击“状态改变时”添加第二个case,状态为state2时。

    选择弹窗左侧“设置选中”,选择FALSEorTRUE。第三个椭圆同理。

    7.点击预约即可,如下图。

    8.设置鼠标移入事件,在index中,点击动态面板,选择属性上的“鼠标移入时”事件。

    双击“鼠标移入时”,弹出弹窗,并选择设为“停止循环”。

    再选择属性中的“鼠标移出时”事件,并双击,选择“next”。

    9.回到index,单击第一个椭圆,在右侧属性中选择“鼠标移入时”,双击,选择“设置动态面板”,并选择“state1”。其它椭圆类推。

    最后,预览即可。

    喜欢就经常来关注,文章会不定期更新~

    相关文章

      网友评论

          本文标题:京东首页海报轮播及手动切换

          本文链接:https://www.haomeiwen.com/subject/kmsiuctx.html