vue.js层叠轮播
2018-11-09 02:36:21来源：博客园 阅读 ()
最近写公司项目有涉及到轮播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>
效果：
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- vue.js开发环境搭建教程 2020-03-16
- vue.js（5）--事件修饰符 2019-08-14
- JavaScript轮播图 2019-08-14
- vue.js（4）--字符串跑马灯 2019-08-14
- vue.js（3）--v-bind与v-on 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签