ES6公用立體輪播組件的封裝及使用
源碼github鏈接：https://github.com/XieTongXue/how-to/tree/master/carousel-3d

1、效果展示

2、容易產(chǎn)生bug的點

當(dāng)前圖片需要一個背景框，如上圖所見白色框，白色框為漂浮于當(dāng)前輪播圖片上方；輪播圖可以點擊跳轉(zhuǎn)到其他網(wǎng)頁，但是由于存在層級關(guān)系，白色款會擋住輪播圖，導(dǎo)致無法跳轉(zhuǎn)

2.1解決思路

將白色框設(shè)置為a鏈接，當(dāng)圖片滾動的時候設(shè)置a鏈接跳轉(zhuǎn)鏈接為當(dāng)前輪播圖應(yīng)該跳轉(zhuǎn)的鏈接，如頭圖。

3、公用組件源碼

命名poster.js

class Poster {constructor(Poster) {let self = this;this.Poster = Poster;this.posterList = Poster.find(".poster-list");this.posterItems = Poster.find(".poster-item");this.firstPosterItem = this.posterItems.first();this.lastPosterItem = this.posterItems.last();this.prevBtn = this.Poster.find(".poster-prev-btn");this.nextBtn = this.Poster.find(".poster-next-btn");this.setting = {"width":"760", // 輪播圖寬度(比如此例子為三張圖片可視區(qū)域?qū)挾?"height":"248", // 輪播圖高度(比如此例子為三張圖片可視區(qū)域高度)"posterWidth":"610", // 當(dāng)前圖片寬度"posterHeight":"248", // 當(dāng)前圖片高度"scale":"0.8", // 非當(dāng)前圖片縮放比例"speed":"1000", // 動畫時長"isAutoplay":"true", // 是否自動播放"dealy":"1000" // 切換間隔}$.extend(this.setting,this.getSetting())this.setFirstPosition();this.setSlicePosition();this.rotateFlag = true;this.prevBtn.bind("click",function(){if(self.rotateFlag){self.rotateFlag = false;self.rotateAnimate("left")}});this.nextBtn.bind("click",function(){if(self.rotateFlag){self.rotateFlag = false;self.rotateAnimate("right")}});if(this.setting.isAutoplay){this.autoPlay();this.Poster.hover(function(){clearInterval(self.timer)},function(){self.autoPlay()})}}autoPlay () {this.prevBtn.click();let that = this;this.timer = window.setInterval(function(){that.prevBtn.click();},that.setting.dealy)}rotateAnimate (type) {let that = this;let zIndexArr = [];if(type == "left"){this.posterItems.each(function(){let self = $(this),prev = $(this).next().get(0)?$(this).next():that.firstPosterItem,width = prev.css("width"),height = prev.css("height"),zIndex = prev.css("zIndex"),opacity = prev.css("opacity"),left = prev.css("left"),top = prev.css("top");if(top === '0px') { // 切換圖片時記錄當(dāng)前圖片href設(shè)置到固定框href$('.j-curr-poster-item').attr('href', self.attr('href'))}zIndexArr.push(zIndex);self.animate({"width":width,"height":height,"left":left,"opacity":opacity,"top":top,},that.setting.speed,function(){that.rotateFlag = true;});});this.posterItems.each(function(i){$(this).css("zIndex",zIndexArr[i]);});}if(type == "right"){this.posterItems.each(function(){let self = $(this),next = $(this).prev().get(0)?$(this).prev():that.lastPosterItem,width = next.css("width"),height = next.css("height"),zIndex = next.css("zIndex"),opacity = next.css("opacity"),left = next.css("left"),top = next.css("top");if(top === '0px') { // 切換圖片時記錄當(dāng)前圖片href設(shè)置到固定框href$('.j-curr-poster-item').attr('href', self.attr('href'))}zIndexArr.push(zIndex);self.animate({"width":width,"height":height,"left":left,"opacity":opacity,"top":top,},that.setting.speed,function(){that.rotateFlag = true;});});this.posterItems.each(function(i){$(this).css("zIndex",zIndexArr[i]);});}}setFirstPosition () {this.Poster.css({"width":this.setting.width,"height":this.setting.height});this.posterList.css({"width":this.setting.width,"height":this.setting.height});let width = (this.setting.width - this.setting.posterWidth) / 2;this.firstPosterItem.css({"width":this.setting.posterWidth,"height":this.setting.posterHeight,"left":width,"zIndex":Math.ceil(this.posterItems.size()/2),"top":this.setVertialType(this.setting.posterHeight)});}setSlicePosition () {let _self = this;let sliceItems = this.posterItems.slice(1),level = Math.floor(this.posterItems.length/2),leftItems = sliceItems.slice(0,level),rightItems = sliceItems.slice(level),posterWidth = this.setting.posterWidth,posterHeight = this.setting.posterHeight,Btnwidth = (this.setting.width - this.setting.posterWidth) / 2,gap = Btnwidth/level,containerWidth = this.setting.width;let i = 1;let leftWidth = posterWidth;let leftHeight = posterHeight;let zLoop1 = level;leftItems.each(function(index,item){leftWidth = posterWidth * _self.setting.scale;leftHeight = posterHeight*_self.setting.scale;$(this).css({"width":leftWidth,"height":leftHeight,"left": Btnwidth - i*gap,"zIndex":zLoop1--,"opacity": 0.8,"top":_self.setVertialType(leftHeight)});i++;});let j = level;let zLoop2 = 1;let rightWidth = posterWidth;let rightHeight = posterHeight;rightItems.each(function(index,item){let rightWidth = posterWidth * _self.setting.scale;let rightHeight = posterHeight*_self.setting.scale;$(this).css({"width":rightWidth,"height":rightHeight,"left": containerWidth -( Btnwidth - j*gap + rightWidth),"zIndex":zLoop2++,"opacity": 0.8,"top":_self.setVertialType(rightHeight)});j--;});}getSetting () {let settting = this.Poster.attr("data-setting");if(settting.length > 0){return $.parseJSON(settting);}else{return {};}}setVertialType (height) {let algin = this.setting.algin;if(algin == "top") {return 0}else if(algin == "middle"){return (this.setting.posterHeight - height) / 2}else if(algin == "bottom"){return this.setting.posterHeight - height}else {return (this.setting.posterHeight - height) / 2}} }

4、組件使用

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Carousel-3D</title><link href="./poster.css" rel="stylesheet"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body><div class="poster"> <!--輪播圖最外層容器，命名隨意--><!--輪播圖區(qū)域，class名要與實例化時所用的一致--><div class = "poster-main" data-setting = '{"width":760,"height":248,"posterWidth":610,"posterHeight":248,"scale":0.85,"dealy":"3000","algin":"middle"}' ><!--當(dāng)前圖片背景框--><a href="" class="curr-bg j-curr-poster-item" target="_blank"></a><!--圖片列表--><div class = "poster-list"><a class = "poster-item" href="https://github.com/xietongxue" title="1" class="ms-slide-pic-img" target="_blank" style="width:100%;height: 100%;"><img src="img/1.png" alt="1" width="610" height="248" border="0"></a><a class = "poster-item" href="https://blog.csdn.net/fabulous1111" title="2" class="ms-slide-pic-img" target="_blank" style="width:100%;height: 100%;"><img src="img/2.png" alt="2" width="610" height="248" border="0"></a><a class = "poster-item" href="https://www.baidu.com" title="3" class="ms-slide-pic-img" target="_blank" style="width:100%;height: 100%;"><img src="img/3.png" alt="3" width="610" height="248" border="0"></a></div><!--按鈕--><button class="btn-left poster-prev-btn"></button><button class="btn-right poster-next-btn"></button></div> </div> </body> <script src="./poster.js"></script> <script> // 用于適配一個網(wǎng)頁有多個輪播的情況，只含一個其實只需要new Poster($('.poster-main')); $('.poster-main').each(function(index,item){// 初始化輪播圖new Poster($(this)); }); </script> </html>

5、sass

*{padding:0;margin:0} html,body {width: 100%;height:100%;background: #666;}@mixin setBtn($width, $height, $left, $top, $img) {position: absolute;top: $top;left: $left;width: $width;height: $height;background: url('./img/' + $img + '.png') no-repeat;border:none;outline: none;cursor: pointer;z-index: 666; } .poster {position: absolute;top: 200px;left: 50%;transform: translateX(-50%);width: 820px;height: 280px;z-index: 5;.poster-main{position: absolute;top: 0;left: 30px;width: 100%;height:100%;.btn-left {@include setBtn(36px, 36px, -20.5px, 110px, 'btn-left');}.btn-right {@include setBtn(36px, 36px, 738.5px, 110px, 'btn-right');}.curr-bg {display: block;position: absolute;top: -2px;left: 61px;width: 638px;height: 273px;background:url('./img/curr-bg.png') no-repeat center top;z-index: 666;}.poster-list{position: absolute;top: 8px;left: 0;.poster-item {position: absolute;left: 0px;top: 0px;img {width: 100%;height: 100%;}}}a, img {display: block;}} }

6、支持多張但只支持單數(shù)

原因：

需要圖片資源或者編譯后的css請訪問:https://github.com/XieTongXue/how-to/tree/master/carousel-3d

總結(jié)

以上是生活随笔為你收集整理的ES6公用立体轮播组件的封装及使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。