Axure教程：使用动态面板实现轮播图

者在本文中介绍了如何用Axure动态面板实现轮播图效果的操作步骤，与大家分享。

所需元件

一个转换为动态面板的矩形并命名为轮播图：

这里要记得把“自动调整为内容尺寸”勾选取消掉，方便后面调整图片大小。

三张图片并给图片编号1、2、3：

三个椭圆并给椭圆对应编号1,2,3：

操作步骤

（1）建立三个面板并分别命名为“图1”、“图2”、“图3”

（2）将三张图分别放到三个面板下

（3）为动态面板设置第一个交互动作——载入时，使其自动轮播。

（4）看看效果

到这一步我们已经实现了轮播图的自动轮播，但是椭圆元件还只是摆设作用，接下来让我们为椭圆也加入交互。

（5）将三个椭圆放到一个选项组内

按住Ctrl键并用鼠标分别点击三个椭圆，在“设置选项组名称”里填入group。

这里选项组的作用是保证这三个椭圆当有一个是选中状态时，其他两个都将是非选中状态。

（6）为每个椭圆设置相应的交互动作——鼠标单击时，以及交互样式——选中

1）椭圆1：

交互动作：

这里需要注意，因为图1在最左边，所以“进入动画”是“向右滑动”。

交互样式：

2）椭圆3：

交互动作：

图3在最右边，所以“进入动画”是“向左滑动”。

交互样式：

与椭圆1相同。

3）椭圆2：

交互动作：

因为椭圆2处于中间，所以我们需要增加判断条件：

最终椭圆2的交互动作为：

交互样式：

与椭圆1相同。

4）动态面板：

我们再为动态面板交互动作——载入时，增加一个椭圆1状态为选中。

（7）再看看效果：

（8）当我们点击了椭圆时，会发现轮播图的自动轮播效果没了，如果想要实现点击椭圆后轮播图继续轮播只需要再在每个椭圆的交互动作后面增加动作：

到这里我们的轮播图就完成啦！?( ‘ω’ )? get！

小记

（1）这里我们用到了动态面板的又一种用途——轮播图。如果想知道动态面板的另一种用途——密码可见性切换，可以看我的另一篇文章：http://www.woshipm.com/rp/3126520.html

（2）轮播图实现起来不难，但是主要考验我们对于项目中每个元件的命名的严谨准确，否则很容易就会把椭圆对应的图片弄混，比如点击第一个椭圆却跳到了第三张图…这个项目还只是一个案例，里面的元件非常少，只有十个不到。

然而当我们制作一个较大的原型时，项目里面的元件少说也有上百个，当你从一开始没有养成给每个元件命好名的习惯的话，后面再去梳理将会是一件非常麻烦的事情，也不便于后面查看你的项目的人的查阅。血的教训o(╯□╰)o，所以切记从一开始就为每个添加的元件命好名！

本文由 @Nilz 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash ，基于 CC0 协议

片的轮播

JS的简单操作实现图片的轮播效果

<!DOCTYPE html>

<html>

<head>

<title>统一站内风格</title>

div{

text-align: center;

}

body{

background-color: gray;

}

div img{

width: 400px;

height: 250px;

}

</style>

</head>

<!-- onload事件：body元素加载后调用

init（）：js函数，在页面加载后调用init（）函数 -->

<div>

</p>

</div>

var di=0;

/* 用arry数组存储图片路径，达到无需更改代码，只需更改数组值就可更换另一组图的目的*/

var arry=new Array("index1.jpg","index2.jpg","index3.jpg","index4.jpg");

function init(){

/* setInterval函数，参数（函数名，数字（单位毫秒））

Interval：间隔

该函数表示一定时间后调用另一个函数

window.setInterval(changeImg,3000);

}

function former(){

/* 通过id获取元素img */

var img=document.getElementById("myimg");

if(di>0 && di<4){

di--;

/* 通过修改src属性，达到更换地址的目的，实现图片的转换 */

img.setAttribute("src", arry[di]);

}else if(di==0){

di=3;

/* 通过修改src属性，达到更换地址的目的，实现图片的转换 */

img.setAttribute("src", arry[di]);

}

function next(){

/* 通过id获取元素img */

var img=document.getElementById("myimg");

if(di<3){

di++;

/* 通过修改src属性，达到更换地址的目的，实现图片的转换 */

img.setAttribute("src", arry[di]);

}else if(di==3){

di=0;

/* 通过修改src属性，达到更换地址的目的，实现图片的转换 */

img.setAttribute("src", arry[di]);

}

function changeImg(){

/* 通过id获取元素img */

var img=document.getElementById("myimg");

di++;

if(di>3){

di=0;

}

/* 通过修改src属性，达到更换地址的目的，实现图片的转换 */

img.setAttribute("src", arry[di]);

}

</script>

</body>

</html>

.1jQuery轮播图:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery轮播图2</title>

<style>

*{

margin: 0;

padding: 0;

text-decoration: none;

}

.container{

width: 600px;

height: 400px;

overflow: hidden;

position: relative;

margin: 0 auto;

}

.list{

width: 4200px;

height: 400px;

position: absolute;

top:0;

left:-600px;

}

.list img{

float: left;

}

.pointsDiv{

position: absolute;

bottom: 10px;

left:50%;

transform: translateX(-50%);

/*width: 100px;*/

height: 20px;

}

.pointsDiv span{

float: left;

width: 20px;

height: 20px;

margin-right: 10px;

border-radius: 50%;

border:2px solid #fff;

box-sizing: border-box;

background: rgba(0,0,0,0.5);

cursor: pointer;

}

.pointsDiv span.active{

background: pink;

}

.arrow{

width: 40px;

height: 40px;

background: rgba(0,0,0,0.4);

position: absolute;

top:50%;

margin-top: -20px;

/*transform: translateY(-50%);*/

color: #fff;

font-size: 36px;

text-align: center;

line-height: 34px;

display: none;

}

.arrow:hover{

background: rgba(0,0,0,0.6);

}

.container:hover .arrow{

display: block;

}

#prev{

left:20px;

}

#next{

right:20px;

}

</style>

</head>

<body>

<div class="container">

<div class="list">

<img src="img/5.jpg" alt="">

<img src="img/1.jpg" alt="">

<img src="img/2.jpg" alt="">

<img src="img/3.jpg" alt="">

<img src="img/4.jpg" alt="">

<img src="img/5.jpg" alt="">

<img src="img/1.jpg" alt="">

</div>

<div class="pointsDiv">

<span class="active"></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

<a href="javascript：;" id="prev" class="arrow"><</a>

<a href="javascript：;" id="next" class="arrow">></a>

</div>

<script src="../jquery-1.10.1.js"></script>

<script type="text/javascript">

$(function () {

//获取最外层容器

var $container=$('.container')

//获取所有图片的容器

var $list=$('.list')

//获取小圆点的集合

var $points=$('.pointsDiv>span')

//获取左右按钮

var $prev=$('#prev')

var $next=$('#next')

//动画时长

var time=3000

//动画帧时长

var itemTime=30

//图片宽度

var PAGE_WIDTH=600

//圆点的总长度

var showImg=$points.length

// --上一次的索引

var index=0

// 定义标识变量 用来记录当前图片是否正在执行动画

var isMoving=false

// 左 右 按钮绑定点击监听

$prev.click(function () {

//向左走为false

nextPage(false)

})

$next.click(function(){

//向右走为true

nextPage(true)

})

//点击小圆点时-切换到对应的图片

$points.click(function () {

//点击当前小圆点的索引--(参照于当前点击的兄弟元素的索引)

var targetIndex=$(this).index()

//调用函数,传入当前索引

nextPage(targetIndex)

})

//循环轮播(定时器):

var intervalID=setInterval(function () {

//调用向右切图函数,time>3000毫秒执行一次

nextPage(true)

},time) //循环时间可以传变量time 或其它变量,也可以直接传3000

//鼠标进入图片区域时,自动停止切换,当鼠标离开后,再开启自动切换

$container.hover(function () {

//移入时先关闭轮播的定时器

clearInterval(intervalID)

},function () {

//移除时再次赋值,开启定时器

intervalID=setInterval(function () {

//调用向右切图函数,time>3000毫秒执行一次

nextPage(true)

},time) //循环时间可以传变量time 或其它变量,也可以直接传3000

})

//定义一个通用的函数

function nextPage(next){

//进入函数则开启

if (isMoving){

return //判断为true,则函数直接结束

}

isMoving=true

// next这个形参用来区分 图片移动的方向 、

// 如果是false则在当前的left值基础之上+600,如果是true则在当前的left值基础上-600

// 参数类型判断

if (typeof next==="boolean"){

//检查next类型如果布尔值,结果为true则赋值-PAGE_WIDTH

var offset=next ? -PAGE_WIDTH :PAGE_WIDTH

}else {

//结果为false, 赋值 -图片张数*图片长度

var offset=-(next-index) * PAGE_WIDTH

}

//单次偏移=总偏移/(动画时长time /动画帧时长itemtime)

var itemOffset=offset / (time / itemTime)

//当前list的left值

var left=$list.position().left

//目的地=当前位置 +总偏移

var tagetLeft=left + offset

//启动定时器 开启动画

var timer=setInterval(function () {

//当前位置 +单次偏移

left +=itemOffset

//判断当前位置到达目的地 清除定时器,关闭动画

if (left===tagetLeft){

clearInterval(timer)

//翻页完成时,判断是否到达图片边界

if(left===0){

//说明到了最后一张假图,修正到最后一张真图位置

left=-showImg * PAGE_WIDTH //图片总长度*单张图片宽度=最后位置的图片

}else if (left===-(showImg+1)*PAGE_WIDTH){

//说明到了假的第一张,修正到真的第一张

left=-PAGE_WIDTH

}

isMoving=false

}

//最终修改 list的left值

$list.css('left',left)

},itemTime)

//更新圆点

upData(next)

}

//更新圆点的函数

function upData(next) {

//参数类型判断

if (typeof next==="boolean"){

//当前点击索引true 为索引+1 ,false为索引-1

var targetIndex=next ? index +1 :index-1

}else {

//或者停止当前显示位置的索引

var targetIndex=next

}

//判断 小圆点边界 小于最小值,修改为等于最大值

if (targetIndex < 0){

targetIndex=showImg -1

}else if (targetIndex > showImg -1){

//判断 小圆点边界 大于最大值 ,修改为等于最小值

targetIndex=0

}

//去除上一个索引的小圆点的active属性,则恢复为黑色

$points.eq(index).removeClass('active')

//给当前索引的小圆点添加active属性,则当前为红色

$points.eq(targetIndex).addClass('active')

//更新索引

index=targetIndex

}

})

</script>

</body>

</html>

3.2jQuery事件委托:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<ul>

<li><span class="test">111</span></li>

<li><span class="test">222</span></li>

<li><span class="test">333</span></li>

<li><span class="test">444</span></li>

</ul>

<button id="btn1">增加新的li</button>

<button id="btn2">解除事件委托</button>

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

// 点击li改变其背景颜色

// $('ul>li').click(function () {

// this.style.backgroundColor='pink';

// })

// delegate方法：由父元素调用 传递三个参数（子元素(选择器)，事件名称，回调函数）

$('ul').delegate('li .test','click',function () {

this.style.backgroundColor='pink';

});

// 点击btn1 新增li

$('#btn1').click(function () {

$('ul').append('<li>我是新增的li</li>')

})

// 点击btn2 解绑事件委托

$('#btn2').click(function () {

$('ul').undelegate();

})

</script>

</body>

</html>

3.3jQuery动画方法:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

margin: 0;

padding: 0;

}

.box{

width: 200px;

height: 200px;

background: pink;

position: absolute;

top:50px;

left:50px;

}

/*过渡属性 一定要给元素设置初始值 不然过渡不生效 x

left right top bottom auto

width auto

*/

.test{

width: 100%;

height: 200px;

background: pink;

/*position: absolute;*/

/*left:0;*/

transition:width 1s 2s,2s;

/*transition: width 1s 2s , all 2s 0s;*/

}

.test:hover{

background: yellowgreen;

width: 50%;

}

</style>

</head>

<body>

<div class="test">今天天气真不错</div>

<!--<div class="box"></div>-->

<!--<button id="btn1">隐藏</button>-->

<!--<button id="btn2">显示</button>-->

<!--<button id="btn3">切换</button>-->

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

$(function () {

// show()显示和hide()隐藏 如果不传递时间 是没有任何过渡的

// 隐藏

$('#btn1').click(function () {

// 淡出

// $('.box').fadeOut(2000);

// 滑出

// $('.box').slideUp(1000);

// 隐藏

$('.box').hide(2000);

});

// 显示

$('#btn2').click(function () {

// 淡入

// $('.box').fadeIn(2000)

// 滑入

// $('.box').slideDown(1000)

// 显示

$('.box').show(2000);

});

// 切换

$('#btn3').click(function () {

// 淡入淡出切换

// $('.box').fadeToggle()

// 滑动切换

// $('.box').slideToggle();

// 显示隐藏切换

$('.box').toggle(1000);

})

})

</script>

</body>

</html>

3.4jQuery自定义动画:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>24_自定义动画</title>

<style type="text/css">

* {

margin: 0px;

}

.div1 {

position: absolute;

width: 100px;

height: 100px;

top: 50px;

left: 300px;

background: red;

color: #fff;

}

</style>

</head>

<body>

<button id="btn1">逐渐扩大</button>

<button id="btn2">向右移动</button>

<button id="btn3">向左移动</button>

<button id="btn4">停止动画</button>

<div class="div1">

爱在西元前，情在塞纳河畔

</div>

<!--

jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的

1. animate(): 自定义动画效果的动画

2. stop(): 停止动画

-->

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

/*

需求：

1.逐渐扩大

1.宽度扩大

2.宽度和高度扩大

3.先宽度扩大后高度扩大

2.向右移动

1.向右移动 固定的200px

2.基于当前位置向右移动 200px

3.向左移动

1.向右移动 固定的200px

2.基于当前位置向右移动 200px

4.停止动画

1.停止所有的动画

2.停止当前动画，直接开始下一个动画

3.停止并结束当前动画，开始下一个动画

*/

$(function () {

// 1.逐渐扩大

// 1.宽度扩大

// 2.宽度和高度扩大

// 3.先宽度扩大后高度扩大

// animate 两个参数：参数1 是一个对象 设置要过渡的样式 参数2 过渡时间 单位毫秒

$('#btn1').click(function () {

$('.div1').animate({

'width':'300px'

},1000).animate({

'height':'300px'

},1000)

});

// 2.向右移动

// 1.向右移动 固定的200px

// 2.基于当前位置向右移动 200px

$('#btn2').click(function () {

$('.div1').stop().animate({

'left':'+=300px'

},3000)

});

// 3.向左移动

// 1.向左移动 固定的200px

// 2.基于当前位置向右移动 200px

$('#btn3').click(function () {

$('.div1').stop().animate({

'left':'-=300'

},3000)

});

// 4.停止动画

// 1.停止所有的动画

// 2.停止当前动画，直接开始下一个动画

// 3.停止并结束当前动画，开始下一个动画

$('#btn4').click(function () {

// 参数1：是否清空动画队列 参数2：当前动画是否执行完成

// $('.div1').stop(false,false);//立即停止当前动画 在当前位置执行下一个动画 不清空动画队列

// $('.div1').stop(true,false);//立即停止当前动画 清空动画队列 停留在原地 之后的不执行

//$('.div1').stop(true,true);//立即完成当前动画直接跳到当前动画结束位置 清空动画队列

$('.div1').stop(false,true);//立即完成当前动画直接跳到当前动画结束位置 不清空动画队列

})

})

</script>

</body>

</html>

3.5jQuery window.onload 只能指定一个回调函数 document.ready可以指定多次:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

//window.onload与document.ready的区别

// window.onload是需要等所有的资源加载完成才会触发回调函数 html css js 图片等

// jquery的加载事件是document.ready 指的是文档（dom）加载完成后 就会触发 不包含其他资源

// window.onload 只能指定一个回调函数 document.ready可以指定多次

var $img=$('#logo');

console.log($img.width());

window.onload=function () {

console.log('onload1:'+$img.width());

};

window.onload=function () {

console.log('onload2:'+$img.width());

};

$(function () {

console.log('jQuery1:'+$img.width());

});

$(function () {

console.log('jQuery2:'+$img.width());

});

$(document).ready(function () {

});

</script>

</body>

</html>

3.6多库共存:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<script type="text/javascript" src="js/myLib.js"></script>

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

// 如果有两个库都有$ 就存在冲突

// jQuery可以释放$的使用权，让另外一个库正常使用，此时jQuery就只能使用jQuery了

// jQuery.noConflict() 解决$命名冲突

jQuery.noConflict();

$();

jQuery(function () {

alert('我是jQuery')

});

</script>

</body>

</html>

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#春日生活打卡季#

在线咨询

上一篇：HTML 指南
下一篇：算法数据，数据结构，python概述

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Axure教程：使用动态面板实现轮播图

所需元件

操作步骤

小记

片的轮播

.1jQuery轮播图:

3.2jQuery事件委托:

3.3jQuery动画方法:

3.4jQuery自定义动画:

3.5jQuery window.onload 只能指定一个回调函数 document.ready可以指定多次:

3.6多库共存:

您的项目需求