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多庫共存:

您的項目需求