vue.js層疊輪播_ZenDei技術網路在線

最近寫公司項目有涉及到輪播banner，一般的ui框架無法滿足產品需求；所以自己寫了一個層疊式輪播組件；現在分享給大家；主要技術棧是vue.js ;javascript;jquery；確定實現思路因工作繁忙，暫時不做梳理了；直接貼代碼參考；此組件是基於jquer封裝，在vue項目中使用首先需要先 ...

最近寫公司項目有涉及到輪播banner，一般的ui框架無法滿足產品需求；所以自己寫了一個層疊式輪播組件；現在分享給大家；

主要技術棧是vue.js ;javascript;jquery；確定實現思路因工作繁忙，暫時不做梳理了；直接貼代碼參考；

此組件是基於jquer封裝，在vue項目中使用首先需要先安裝jquery插件：指令：npm install jquery,安裝完成之後再webpack.base.conf.js配置插件：

 plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
  ]

主要實現邏輯js文件：postercarousel.js；

代碼如下：

  1 (function(jq){
  2         function postercarousel(o, options, data){
  3         this.parent = jq("#"+ o);
  4         this.body   = jq("body");
  5         if (this.parent.length <= 0) { 
  6             return false;
  7         }
  8         
  9         this.options = jq.extend({}, postercarousel.options, options);
 10         if(typeof(data) !== 'object') return false;
 11 
 12         this.data = data || {};
 13         this.reset();
 14         //處理頁面resize
 15         var _this = this;
 16         jq(window).resize(function(){
 17                 _this.reset();
 18         });
 19     };
 20     postercarousel.prototype = {
 21         reset: function(options){
 22             if(typeof(options) == 'object'){
 23                 jq.extend(this.options, options);    
 24             }
 25             if(parseInt(this.body.outerWidth())>1255 || navigator.userAgent.indexOf('iPad') !== -1){
 26                 this.options.width = 970;    
 27             }else{
 28                 this.options.width = 970;    
 29             }
 30             this.total = this.data.length;
 31             this.pageNow = this.options.initPage;
 32             this.preLeft = 0;
 33             this.nextLeft = this.options.width-530;
 34             this.preNLeft = -530;
 35             this.nextNLeft = this.options.width;
 36             this.pageNowLeft = (this.options.width-640)/2
 37             this.drawContent();
 38         },
 39         drawContent: function(){
 40             this.parent.empty();
 41             this.parent.css({width:this.options.width+"px", height:this.options.height+"px", position: "relative"});
 42             this.content = document.createElement("DIV");
 43             this.content.className = this.options.className;
 44             this.content.cssText = "width:"+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;";
 45                 this.bottomNav = document.createElement("DIV");
 46                 this.bottomNav.className = "bottomNav";
 47                 for(var i=1; i<= this.total; i++){
 48                     var bottomItem = document.createElement("DIV");
 49                     bottomItem.className = "bottomNavButtonOFF";
 50                     if(i == this.pageNow){
 51                         bottomItem.className = "bottomNavButtonOFF bottomNavButtonON";
 52                     }
 53                     bottomItem.setAttribute("ref", i);
 54                     this.bottomNav.appendChild(bottomItem);
 55                 }
 56                 this.content.appendChild(this.bottomNav);
 57                 this.bannerControls = '<div class="bannerControls"> <div class="leftNav" style="display: block;"></div> <div class="rightNav" style="display: block;"></div> </div>';
 58                 this.content.innerHTML += this.bannerControls;
 59 
 60             this.contentHolder = document.createElement("DIV");
 61             this.contentHolder.style.width = this.options.width + 'px';
 62             this.contentHolder.style.height = this.options.height + 'px';
 63             
 64             for(var item=0, i = 1, l= this.data.length ; item < l ; ++item, ++i){
 65                 var contentHolderUnit = document.createElement("DIV");
 66                 contentHolderUnit.className = "contentHolderUnit";
 67                 contentHolderUnit.setAttribute("ref", i);
 68                 contentHolderUnit.setAttribute("id", 'contentHolderUnit' + (i));
 69                 var unitItem = '<a href="'+this.data[item].url+'" target="_blank" class="elementLink">';
 70                 unitItem += '</a>';
 71                 unitItem += '<img src="'+this.data[item].img+'" alt="'+this.data[item].title+'"/>';
 72                 unitItem += '<span class="elementOverlay"></span>';
 73                 unitItem += '<span class="leftShadow"></span>';
 74                 unitItem += '<span class="rightShadow"></span>';
 75                 contentHolderUnit.innerHTML = unitItem;
 76                 this.contentHolder.appendChild(contentHolderUnit);
 77             }
 78             this.content.appendChild(this.contentHolder);
 79             this.parent.append(this.content);
 80             this.parent.css({overflow:'hidden'});
 81             this.initContent();
 82             this.bind();
 83             this.start();
 84         },
 85         initContent: function(){
 86             contentHolderUnit = this.parent.find(".contentHolderUnit");
 87             contentHolderUnit.css({width:'0px',height:'0px', opacity: 0, left:this.options.width/2+'px', zIndex:0, marginTop: '135px'});
 88             this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+")").css({width:'640px',height:'450', opacity: 1, left: this.pageNowLeft+'px', zIndex: 3, marginTop: 0});
 89             this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .elementOverlay").css({opacity:0});
 90             this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .leftShadow").css({opacity:1});
 91             this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .rightShadow").css({opacity:1});
 92             
 93             var pre = this.pageNow > 1 ? this.pageNow -1: this.total;
 94             var next = this.pageNow == this.total ? 1 : this.pageNow + 1;
 95             this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 1, left: this.preLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'});
 96             this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
 97             this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
 98             this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
 99 
100             this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 1, left: this.nextLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'});
101             this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
102             this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
103             this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
104         },
105         bind: function(){
106             this.leftNav = this.parent.find(".leftNav");
107             this.rightNav = this.parent.find(".rightNav");
108             this.bottonNav = this.parent.find(".bottomNavButtonOFF");
109             this.lists = this.parent.find(".contentHolderUnit");
110             var _this = this;
111             this.parent.mouseover(function(){
112                 _this.stop();
113                 _this.leftNav.show();
114                 _this.rightNav.show();
115             });
116             this.parent.mouseout(function(){
117                 _this.start();
118                 //_this.leftNav.hide();
119                 //_this.rightNav.hide();
120             });
121             
122             _this.leftNav.click(function(){
123                 _this.turn("right");                     
124             });
125             _this.rightNav.click(function(){
126                 _this.turn("left");                     
127             });
128             _this.bottonNav.click(function(){
129                 var ref = parseInt(this.getAttribute("ref"));
130                 if(_this.pageNow == ref) return false;
131 
132                 if(_this.pageNow < ref){
133                     var rightAbs = ref - _this.pageNow;
134                     var leftAbs = _this.pageNow + _this.total - ref;
135                 }else{
136                     var rightAbs = _this.total - _this.pageNow + ref;
137                     var leftAbs = _this.pageNow - ref;
138                 }
139                 if(leftAbs < rightAbs){
140                      dir = "right";    
141                 }else{
142                      dir = "left";    
143                 }
144 
145                 _this.turnpage(ref, dir);
146                 return false;
147             });
148             
149             _this.lists.click(function(e){
150                 var ref = parseInt(this.getAttribute("ref"));
151                 if(_this.pageNow == ref) {
152                     return true;
153                 }else{
154                     e.preventDefault();
155                 }
156                 if(_this.pageNow < ref){
157                     var rightAbs = ref - _this.pageNow;
158                     var leftAbs = _this.pageNow + _this.total - ref;
159                 }else{
160                     var rightAbs = _this.total - _this.pageNow + ref;
161                     var leftAbs = _this.pageNow - ref;
162                 }
163                 if(leftAbs < rightAbs){
164                      dir = "right";    
165                 }else{
166                      dir = "left";    
167                 }
168                 _this.turnpage(ref, dir);    
169 
170             });
171         },
172         initBottomNav: function(){
173                 this.parent.find(".bottomNavButtonOFF").removeClass("bottomNavButtonON");
174                 this.parent.find(".bottomNavButtonOFF:nth-child("+this.pageNow+")").addClass("bottomNavButtonON");
175         },
176         start: function(){
177             var _this = this;
178             if(_this.timerId) _this.stop();
179             _this.timerId = setInterval(function(){
180                 if(_this.options.direct == "left"){
181                     _this.turn("left");    
182                 }else{
183                     _this.turn("right");    
184                 }
185             }, _this.options.delay);
186         },
187         stop: function(){
188             clearInterval(this.timerId);
189         },
190         turn: function(dir){
191             var _this = this;
192             
193             if(dir == "right"){
194                 var page = _this.pageNow -1;
195                 if(page <= 0) page = _this.total;
196             }else{
197                 var page = _this.pageNow + 1;
198                 if(page > _this.total) page = 1;
199             }
200             _this.turnpage(page, dir);
201         },
202         turnpage: function(page, dir){
203             var _this = this;
204             if(_this.locked) return false;
205             _this.locked = true;
206             if(_this.pageNow == page) return false;
207             
208             var run = function(page, dir, t){
209                 var pre = page > 1 ? page -1: _this.total;
210                 var next = page == _this.total ? 1 : page + 1;
211                 var preP = pre - 1 >= 1 ? pre-1 : _this.total;
212                 var nextN = next + 1 > _this.total ? 1 : next+1;
213                 if(pre != _this.pageNow && next != _this.pageNow){
214                     var nowpre = _this.pageNow > 1 ? _this.pageNow -1: _this.total;
215                     var nownext = _this.pageNow == _this.total ? 1 : _this.pageNow + 1;
216                     _this.parent.find(".contentHolderUnit:nth-child("+nowpre+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
217                     _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
218                     _this.parent.find(".contentHolderUnit:nth-child("+nownext+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
219                 }
220                 if(dir == 'left'){                    
221                     _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
222                 
223                     
224                     _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
225                     _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
226                     _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
227                     _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
228                     
229                     
230                     _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3});
231                     _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0'}, t);
232                     _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
233                     _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
234                     _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
235                     
236                     _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 0, left: _this.nextNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'});
237                     _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width:"530px", zIndex: 2, marginTop: '23px'}, t);
238                     _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
239                     _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
240                     _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
241                     _this.parent.find(".contentHolderUnit:nth-child("+preP+")").css({zIndex:0});
242                     _this.parent.find(".contentHolderUnit:nth-child("+preP+")").animate({width:'530px',height:'350px', opacity: 0, left:_this.preNLeft+'px', zIndex:0, marginTop: '85px'},t, "", function(){_this.locked=false;});
243                     
244                     
245                 }else{
246                     _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
247                     
248                     _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({zIndex:2});
249                     _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
250                     _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
251                     _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
252                     _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
253                     
254                     _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}, t);
255                     _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0px'}, t);
256                     _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
257                     _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
258                     _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
259                     
260                     _this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 0, left: _this.preNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'});
261                     _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
262                     _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
263                     _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
264                     _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
265                     
266                     _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").css({zIndex:0});
267                     _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").animate({width:'530px',height:'450', opacity: 0, left:_this.nextNLeft+'px', zIndex:0, marginTop: '85px'}, t, "",function(){_this.locked=false;});
268                 }
269             
270                 _this.pageNow = page;
271                 _this.initBottomNav();
272             };
273             
274             run(page, dir,_this.options.speed);                    
275             
276         }
277         
278     };
279 
280     postercarousel.options = {
281         offsetPages : 3,//預設可視最大條數
282         direct : "left",//滾動的方向
283         initPage : 1,//預設當前顯示第幾條
284         className : "postercarousel",//最外層樣式
285         autoWidth : false,//預設不用設置寬
286         // width : 100,//最外層寬，需要使用的時候在傳,預設由程式自動判斷
287         height :450,//最外層高  
288         delay : 3000,//滾動間隔（毫秒）
289         speed : 500 //滾動速度毫秒
290     };
291     
292     window.postercarousel = postercarousel;
293 })(jQuery)

相關vue組件代碼以及使用方式：

代碼如下：

  1 <template>
  2   <div class="broadcast">
  3     <div class="htmleaf-container">
  4       <div class="htmleaf-content">
  5         <div id="postercarousel" style="margin:40px auto 0 auto;"></div>
  6       </div>
  7     </div>
  8   </div>
  9 </template>
 10 <script>
 11 import "jQuery";
 12 import "@/static/js/postercarousel";
 13 export default {
 14   data() {
 15     return {};
 16   },
 17   mounted() {
 18     this.initposter();
 19     console.log(postercarousel);
 20     21   },
 22   methods: {
 23     initposter() {
 24       var postercarousel = new postercarousel(
 25         "postercarousel",
 26         { className: "postercarousel" },
 27         [
 28           {
 29             // img: require("../assets/callme.png"),
 30             img: 'http://occe.ospc.cn/upload/2016-01-18/145309107223576.jpg',
 31             // url: "http://www.htmleaf.com/"
 32           },
 33           {
 34             // img: require("../assets/liaojiewaibao.png"),
 35             img: "http://occe.ospc.cn/upload/2016-01-17/145302166917282.jpg",
 36             // url: "http://www.htmleaf.com/"
 37           },
 38           {
 39             img: require("../assets/ruhui.png"),
 40             img: "http://occe.ospc.cn/upload/2016-01-17/14530216405007.png",
 41             // url: "http://www.htmleaf.com/"
 42           },
 43           {
 44             // img: require("../assets/callme.png"),
 45             img: "http://occe.ospc.cn/upload/2016-01-18/145309108911041.jpg",
 46             // url: "http://www.htmleaf.com/"
 47           },
 48         ]
 49       );
 50     }
 51   }
 52 };
 53 </script>
 54 <style lang="scss">
 55 .broadcast {
 56   /* postercarousel */
 57   #postercarousel {
 58     width: 100% !important;
 59     height: 450px;
 60   }
 61   .postercarousel {
 62     position: relative;
 63     height: 100%;
 64     width: 100% !important;
 65   }
 66   .postercarousel img {
 67     max-width: 100%;
 68     max-height: 100%;
 69     border: 0 none;
 70     background: #888;
 71     display: block;
 72   }
 73   .postercarousel .contentHolder {
 74     position: relative;
 75     overflow: hidden;
 76   }
 77   .postercarousel .contentHolderUnit {
 78     cursor: pointer;
 79     position: absolute;
 80     width: 83% !important;
 81     height: 450px;
 82   }
 83   .postercarousel .contentHolderUnit a.elementLink {
 84     display: block;
 85     overflow: hidden;
 86     z-index: 3;
 87     position: absolute;
 88     left: 0;
 89     right: 0;
 90     width: 100%;
 91     height: 100%;
 92   }
 93   .postercarousel .contentHolderUnit img {
 94     width: 100%;
 95     height: 100%;
 96     display: block;
 97   }
 98   .postercarousel .contentHolderUnit .elementTitle {
 99   }
100   .postercarousel .contentHolderUnit .elementOverlay {
101     z-index: 1;
102     position: absolute;
103     top: 0;
104     left: 0;
105     background: #000;
106     width: 100%;
107     height: 100%;
108     opacity: 0;
109     filter: opacity=0;
110   }
111   .postercarousel .contentHolderUnit .leftShadow {
112     position: absolute;
113     top: 23px;
114     left:-250px;
115     // width: 250px;
116     height:327px;
117     background: url("../assets/images/leftShadow.png") no-repeat;
118     background-size: contain;
119   }
120   .postercarousel .contentHolderUnit .rightShadow {
121     position: absolute;
122     top: 23px;
123     right:134px;
124     height: 327px;
125     background: url("../assets/images/rightShadow.png") no-repeat;
126     background-size: contain;
127   }
128   .postercarousel .bannerControls {
129   }
130   .postercarousel .leftNav,
131   .postercarousel .rightNav {
132     cursor: pointer;
133     z-index: 10;
134     position: absolute;
135     top: 60%;
136     width: 45px;
137     height: 45px;
138     margin-top: -43px;
139   }
140   .postercarousel .leftNav {
141     left: 7px;
142     background: url("../assets/images/1.png") no-repeat;
143     _background: none;
144     _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_prev_btn.png");
145   }
146   .postercarousel .rightNav {
147     right: 7px;
148     background: url("../assets/images/2.png") no-repeat;
149     _background: none;
150     _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_next_btn.png");
151   }
152   .postercarousel .leftNav:hover {
153   }
154   .postercarousel .rightNav:hover {
155   }
156   .postercarousel .bottomNav {
157     z-index: 140;
158     position: absolute;
159     width: 100%;
160     height: 10px;
161     margin-top: 400px;
162     padding: 10px 0 0;
163     text-align: center;
164   }
165   .postercarousel .bottomNavButtonOFF {
166     cursor: pointer;
167     overflow: hidden;
168     display: inline-block;
169     *display: inline;
170     *zoom: 1;
171     width: 10px;
172     height: 10px;
173     margin: 0 5px;
174     vertical-align: top;
175     -webkit-border-radius: 5px;
176     -moz-border-radius: 5px;
177     border-radius: 5px;
178     background: #c3c3c3;
179   }
180   .postercarousel .bottomNavButtonOFF:hover {
181     background: #aaa;
182   }
183   .postercarousel .bottomNavButtonON,
184