vue.js层叠轮播
最近写公司项目有涉及到轮播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 .postercarousel .bottomNavButtonON:hover { 185 background: #69aaec; 186 } 187 .postercarousel .bottomNavLeft { 188 } 189 .postercarousel .bottomNavRight { 190 } 191 } 192 </style>
效果：
执着的小猪仔
