備注：最近工作需要，要用react實現旋轉木馬的輪播圖效果，在網上查了查沒有相似的案例，只有用react實現的簡單的輪播圖，還有就是用jQuery實現的旋轉木馬輪播圖，在參考了這兩個實現方式的基礎上，我用react轉化了這種實現，過程真的很糾結，但是還是做出來了，效果還可以。
效果圖：
Paste_Image.png
實現思路分析
1.每張圖片（li節點）的布局
<ul className={style['poster-list']} style={{width:width,height:height}}>
{
this.props.imgArray.map(function(item,index){
return <li ref={'items'+index} className={style['poster-item']} style={this.renderstyle(index)} key={index}><a href={this.props.linkArray[index]}><img width="100%" height="100%" src={item}/></a></li>;
}.bind(this))
}
</ul>
主要就是renderstyle函數在控制他們的排列：
renderstyle(index) {
const { number, width, imgWidth, scale, vertical, height } = this.props.lunboObject;
const middleIndex = Math.floor(number / 2);
const btnWidth = (width-imgWidth) / 2;
const gap = btnWidth/middleIndex;
let Imgleft;
let ImgTop;
let Imgscale;
let zIndex;
let opacity;
if(index <= middleIndex){
// 右側圖片
Imgscale = Math.pow(scale, (index));
Imgleft = width - (middleIndex-index)*gap - imgWidth*Imgscale;
zIndex=middleIndex+1 - index;
opacity=1/++index;
}else if(index > middleIndex){
// 左側圖片
Imgscale = Math.pow(scale, (number-index));
Imgleft = (index-(middleIndex+1))*gap;
zIndex = index-middleIndex;
opacity = 1 - middleIndex/index;
}
switch(vertical){
case 'bottom':
ImgTop = parseInt(height - height*Imgscale);
break;
case 'center':
ImgTop = parseInt((height - height*Imgscale)/2);
break;
default:
ImgTop = parseInt((height - height*Imgscale)/2);
}
return {
width: parseInt(imgWidth*Imgscale),
height: parseInt(height*Imgscale),
left:parseInt(Imgleft),
zIndex:zIndex,
opacity:opacity,
top:ImgTop
}
}
要想實現3D的效果，需要同時控制每張圖片的6個屬性來回變化，下面分析他們的計算過程（先布局）：
index關系：
Paste_Image.png
實際上要分為左右兩部分實現：
右側：
Imgscale = Math.pow(scale, (index));
Imgleft = width - (middleIndex-index)*gap - imgWidth*Imgscale;
zIndex=middleIndex+1 - index;
opacity=1/++index;
圖片的Zindex和opacity需要認真考慮一下如何設置，其他的都好說，就是數學關系。
zIndex實際上最中間的是3，向右依次遞減；
opacity中間是1，向右依次是1/2,1/3 ... ；
左側：
// 左側圖片
Imgscale = Math.pow(scale, (number-index));
Imgleft = (index-(middleIndex+1))*gap;
zIndex = index-middleIndex;
opacity = 1 - middleIndex/index;
左側唯一麻煩的是，opacity的設置，我是需找的數學規律，只要讓左側的opacity呈現1,1/2,1/3 ... 即可。
2.點擊箭頭讓他動起來
如果是一般的輪播圖就好辦了，直接控制ul的left值就可以，不用直接操作dom，而這種輪播圖是不斷控制每一個li，讓他的狀態變化到上一個或者下一個li的狀態，用state控制變量的方式實在是不會，所以還是操作的dom。
首先，組件掛載后，獲取dom對象，組成數組：
componentDidMount() {
for(let i=0;i<this.props.lunboObject.number;i++){
this.itemsArr.push(findDOMNode(this.refs['items'+(i)]));
};
this.autoPlay();
}
然后，比如點擊左側按鈕的時候，遍歷dom數組，讓當前的li的狀態變為他的上一個（prev）li的狀態，處理一下臨界的問題。
this.itemsArr.forEach((item, index) => {
let self = item;
let next = this.itemsArr[index+1];
if(index == (len-1)){
next = this.itemsArr[0];
}
this.rotateStyle(self, next);
})
rotateStyle這個函數是控制他運動的，
rotateStyle(self, next) {
const { left, top, width, height, zIndex, opacity } = next.style;
this.animate(self, {left:left,width:width,height:height,zIndex:zIndex,opacity: opacity,top:top}, this.props.lunboObject.tweenString, () => {
++this.LOOPNUM ;
});
}
animate是封裝的緩動函數，這個不重要，就不詳細講了。
點擊右側按鈕的時候原理類似，就不再贅述。
3.自己動起來
這個就沒啥可說的了，就是設置定時器不斷觸發右擊箭頭函數，鼠標移入清除定時器，鼠標移出，開啟定時器即可。
4.小圓點跟著點亮
維護一個全局的state變量，activeIndex，每次dom運動的話就會變化這個值，然后控制點是否點亮。
5點擊某個小圓點，讓他運動到當前位置
這是難點！
代碼如下：
// 點擊小圓點動
gotoDotView() {
if(this.state.dotsIndex == this.state.activeIndex){
return ;
}else{
let len = this.itemsArr.length;
// 運動到小圓點指示的位置
if(this.state.dotsIndex - this.state.activeIndex > 0){
// 如果點擊在右側 向左運動
const dotsDiff = this.state.dotsIndex - this.state.activeIndex;
this.setState({
activeIndex: this.state.activeIndex + dotsDiff
})
this.itemsArr.forEach((item, index) => {
let self = item;
let nextIndex = Number.parseInt(index-dotsDiff);
if(nextIndex < 0){
nextIndex = nextIndex+len;
}
let next = this.itemsArr[nextIndex];
this.rotateStyle(self, next);
})
}else{
// 如果點擊在左側
const dotsDiff = this.state.activeIndex - this.state.dotsIndex;
this.setState({
activeIndex: this.state.activeIndex - dotsDiff
})
this.itemsArr.forEach((item, index) => {
let self = item;
let prevIndex = Number.parseInt(index+dotsDiff);
if(prevIndex >= len){
prevIndex = prevIndex-len;
}
let prev = this.itemsArr[prevIndex];
this.rotateStyle(self, prev);
})
}
}
}
這里要分為兩種情況，點擊點在當前活動點的右側，或者左側。然后記錄當前兩個點之間的差值，這個時候，遍歷每個dom，當前的item要變為計算完差值后的item的狀態，并且考慮臨界值的處理，我也說不清楚，具體還是看代碼吧。
6.關于緩動函數
看代碼：
/*
* animate函數是動畫封裝函數
* @para0 elem參數就是運動的對象
* @para1 targetJSON參數就是運動的終點狀態，可以寫px，也可以不寫px
* @para2 time是運動總時間，毫秒為單位
* @para3 tweenString緩沖描述詞，比如"Linear"
* @para4 callback是回調函數，可選
*/
animate(elem , targetJSON , tweenString , callback){
// 緩沖描述詞集合
const Tween = {
Linear: (t, b, c, d) => {
return c * t / d + b;
},
//二次的
QuadEaseIn: (t, b, c, d) => {
return c * (t /= d) * t + b;
},
QuadEaseOut: (t, b, c, d) => {
return -c * (t /= d) * (t - 2) + b;
},
QuadEaseInOut: (t, b, c, d) => {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
//三次的
CubicEaseIn: (t, b, c, d) => {
return c * (t /= d) * t * t + b;
},
CubicEaseOut: (t, b, c, d) => {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
CubicEaseInOut: (t, b, c, d) => {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
},
//四次的
QuartEaseIn: (t, b, c, d) => {
return c * (t /= d) * t * t * t + b;
},
QuartEaseOut: (t, b, c, d) => {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
QuartEaseInOut: (t, b, c, d) => {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
};
let interval = 15;
let time = 300;
//初始狀態，放在origninalJSON里面
let originalJSON = {};
//變化的多少，放在deltaJSON里面
let deltaJSON = {};
for(let k in targetJSON){
originalJSON[k] = parseFloat(elem.style[k]);
//把每個targetJSON中的值都去掉px
targetJSON[k] = parseFloat(targetJSON[k]);
//變化量JSON
deltaJSON[k] = targetJSON[k] - originalJSON[k];
}
//總執行函數次數：
let maxFrameNumber = time / interval;
//當前幀編號
let frameNumber = 0;
//這是一個臨時變量一會兒用
let tween;
//定時器
let timer = setInterval(() => {
//要讓所有的屬性發生變化
for(let k in originalJSON){
// tween就表示這一幀應該在的位置：
tween = Tween[tweenString](frameNumber , originalJSON[k] , deltaJSON[k] , maxFrameNumber);
//根據是不是opacity來設置單位
if(k != "opacity"){
elem.style[k] = tween + "px";
}else{
elem.style[k] = tween;
}
}
//計數器
frameNumber++;
if(frameNumber == maxFrameNumber){
for(let k in targetJSON){
if(k == "opacity" || k == "zIndex"){
elem.style[k] = targetJSON[k];
}else{
elem.style[k] = targetJSON[k] + "px";
}
}
clearInterval(timer);
//拿掉是否在動屬性，設為false
callback && callback();
}
},interval);
}
實際上這個封裝也不難，主要在Tween的理解上，每個緩動函數接收四個參數，分別為：當前幀編號，初始值，結束值，結束幀編號。
在一個就是注意opacity和zIndex要淡出處理一下就可以了。
最后說一下，這個輪播是可以根據實際情況進行個化配置，
lunboObject: {
"width":995,//幻燈片的寬度
"height":335,//幻燈片的高度
"imgWidth":690,//幻燈片第一幀的寬度
"interval": 2000,//幻燈片滾動的間隔時間
"scale":0.85, //記錄顯示比例關系
"number":5,
"autoPlay":true,
"vertical":"top", // center或者bottom,居中對齊或底部對齊
"tweenString":"QuadEaseIn" // 運動方式，緩沖曲線
}
