您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
vue.js中怎么实现一个层叠轮播效果,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
此组件是基于jquer封装,在vue项目中使用首先需要先安装jquery插件:指令:npm install jquery,安装完成之后再webpack.base.conf.js配置插件:
plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), ]
主要实现逻辑js文件:postercarousel.js;
代码如下:
(function(jq){ function postercarousel(o, options, data){ this.parent = jq("#"+ o); this.body = jq("body"); if (this.parent.length <= 0) { return false; } this.options = jq.extend({}, postercarousel.options, options); if(typeof(data) !== 'object') return false; this.data = data || {}; this.reset(); //处理页面resize var _this = this; jq(window).resize(function(){ _this.reset(); }); }; postercarousel.prototype = { reset: function(options){ if(typeof(options) == 'object'){ jq.extend(this.options, options); } if(parseInt(this.body.outerWidth())>1255 || navigator.userAgent.indexOf('iPad') !== -1){ this.options.width = 970; }else{ this.options.width = 970; } this.total = this.data.length; this.pageNow = this.options.initPage; this.preLeft = 0; this.nextLeft = this.options.width-530; this.preNLeft = -530; this.nextNLeft = this.options.width; this.pageNowLeft = (this.options.width-640)/2 this.drawContent(); }, drawContent: function(){ this.parent.empty(); this.parent.css({width:this.options.width+"px", height:this.options.height+"px", position: "relative"}); this.content = document.createElement("DIV"); this.content.className = this.options.className; this.content.cssText = "width:"+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;"; this.bottomNav = document.createElement("DIV"); this.bottomNav.className = "bottomNav"; for(var i=1; i<= this.total; i++){ var bottomItem = document.createElement("DIV"); bottomItem.className = "bottomNavButtonOFF"; if(i == this.pageNow){ bottomItem.className = "bottomNavButtonOFF bottomNavButtonON"; } bottomItem.setAttribute("ref", i); this.bottomNav.appendChild(bottomItem); } this.content.appendChild(this.bottomNav); this.bannerControls = '<div class="bannerControls"> <div class="leftNav" ></div> <div class="rightNav" ></div> </div>'; this.content.innerHTML += this.bannerControls; this.contentHolder = document.createElement("DIV"); this.contentHolder.style.width = this.options.width + 'px'; this.contentHolder.style.height = this.options.height + 'px'; for(var item=0, i = 1, l= this.data.length ; item < l ; ++item, ++i){ var contentHolderUnit = document.createElement("DIV"); contentHolderUnit.className = "contentHolderUnit"; contentHolderUnit.setAttribute("ref", i); contentHolderUnit.setAttribute("id", 'contentHolderUnit' + (i)); var unitItem = '<a href="'+this.data[item].url+'" rel="external nofollow" target="_blank" class="elementLink">'; unitItem += '</a>'; unitItem += '<img src="'+this.data[item].img+'" alt="'+this.data[item].title+'"/>'; unitItem += '<span class="elementOverlay"></span>'; unitItem += '<span class="leftShadow"></span>'; unitItem += '<span class="rightShadow"></span>'; contentHolderUnit.innerHTML = unitItem; this.contentHolder.appendChild(contentHolderUnit); } this.content.appendChild(this.contentHolder); this.parent.append(this.content); this.parent.css({overflow:'hidden'}); this.initContent(); this.bind(); this.start(); }, initContent: function(){ contentHolderUnit = this.parent.find(".contentHolderUnit"); contentHolderUnit.css({width:'0px',height:'0px', opacity: 0, left:this.options.width/2+'px', zIndex:0, marginTop: '135px'}); this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+")").css({width:'640px',height:'450', opacity: 1, left: this.pageNowLeft+'px', zIndex: 3, marginTop: 0}); this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .elementOverlay").css({opacity:0}); this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .leftShadow").css({opacity:1}); this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .rightShadow").css({opacity:1}); var pre = this.pageNow > 1 ? this.pageNow -1: this.total; var next = this.pageNow == this.total ? 1 : this.pageNow + 1; this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 1, left: this.preLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'}); this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4}); this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0}); this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0}); this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 1, left: this.nextLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'}); this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4}); this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0}); this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0}); }, bind: function(){ this.leftNav = this.parent.find(".leftNav"); this.rightNav = this.parent.find(".rightNav"); this.bottonNav = this.parent.find(".bottomNavButtonOFF"); this.lists = this.parent.find(".contentHolderUnit"); var _this = this; this.parent.mouseover(function(){ _this.stop(); _this.leftNav.show(); _this.rightNav.show(); }); this.parent.mouseout(function(){ _this.start(); //_this.leftNav.hide(); //_this.rightNav.hide(); }); _this.leftNav.click(function(){ _this.turn("right"); }); _this.rightNav.click(function(){ _this.turn("left"); }); _this.bottonNav.click(function(){ var ref = parseInt(this.getAttribute("ref")); if(_this.pageNow == ref) return false; if(_this.pageNow < ref){ var rightAbs = ref - _this.pageNow; var leftAbs = _this.pageNow + _this.total - ref; }else{ var rightAbs = _this.total - _this.pageNow + ref; var leftAbs = _this.pageNow - ref; } if(leftAbs < rightAbs){ dir = "right"; }else{ dir = "left"; } _this.turnpage(ref, dir); return false; }); _this.lists.click(function(e){ var ref = parseInt(this.getAttribute("ref")); if(_this.pageNow == ref) { return true; }else{ e.preventDefault(); } if(_this.pageNow < ref){ var rightAbs = ref - _this.pageNow; var leftAbs = _this.pageNow + _this.total - ref; }else{ var rightAbs = _this.total - _this.pageNow + ref; var leftAbs = _this.pageNow - ref; } if(leftAbs < rightAbs){ dir = "right"; }else{ dir = "left"; } _this.turnpage(ref, dir); }); }, initBottomNav: function(){ this.parent.find(".bottomNavButtonOFF").removeClass("bottomNavButtonON"); this.parent.find(".bottomNavButtonOFF:nth-child("+this.pageNow+")").addClass("bottomNavButtonON"); }, start: function(){ var _this = this; if(_this.timerId) _this.stop(); _this.timerId = setInterval(function(){ if(_this.options.direct == "left"){ _this.turn("left"); }else{ _this.turn("right"); } }, _this.options.delay); }, stop: function(){ clearInterval(this.timerId); }, turn: function(dir){ var _this = this; if(dir == "right"){ var page = _this.pageNow -1; if(page <= 0) page = _this.total; }else{ var page = _this.pageNow + 1; if(page > _this.total) page = 1; } _this.turnpage(page, dir); }, turnpage: function(page, dir){ var _this = this; if(_this.locked) return false; _this.locked = true; if(_this.pageNow == page) return false; var run = function(page, dir, t){ var pre = page > 1 ? page -1: _this.total; var next = page == _this.total ? 1 : page + 1; var preP = pre - 1 >= 1 ? pre-1 : _this.total; var nextN = next + 1 > _this.total ? 1 : next+1; if(pre != _this.pageNow && next != _this.pageNow){ var nowpre = _this.pageNow > 1 ? _this.pageNow -1: _this.total; var nownext = _this.pageNow == _this.total ? 1 : _this.pageNow + 1; _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); _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); _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); } if(dir == 'left'){ _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0}); _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4}); _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t); _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}); _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0'}, t); _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1}); _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1}); _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 0, left: _this.nextNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'}); _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width:"530px", zIndex: 2, marginTop: '23px'}, t); _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4}); _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+preP+")").css({zIndex:0}); _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;}); }else{ _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0}); _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({zIndex:2}); _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t); _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4}); _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}, t); _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0px'}, t); _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1}); _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1}); _this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 0, left: _this.preNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'}); _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t); _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4}); _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0}); _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").css({zIndex:0}); _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;}); } _this.pageNow = page; _this.initBottomNav(); }; run(page, dir,_this.options.speed); } }; postercarousel.options = { offsetPages : 3,//默认可视最大条数 direct : "left",//滚动的方向 initPage : 1,//默认当前显示第几条 className : "postercarousel",//最外层样式 autoWidth : false,//默认不用设置宽 // width : 100,//最外层宽,需要使用的时候在传,默认由程序自动判断 height :450,//最外层高 delay : 3000,//滚动间隔(毫秒) speed : 500 //滚动速度毫秒 }; window.postercarousel = postercarousel; })(jQuery)
相关vue组件代码以及使用方式:
代码如下:
<template> <div class="broadcast"> <div class="htmleaf-container"> <div class="htmleaf-content"> <div id="postercarousel" ></div> </div> </div> </div> </template> <script> import "jQuery"; import "@/static/js/postercarousel"; export default { data() { return {}; }, mounted() { this.initposter(); console.log(postercarousel); 21 }, methods: { initposter() { var postercarousel = new postercarousel( "postercarousel", { className: "postercarousel" }, [ { // img: require("../assets/callme.png"), img: 'https://cache.yisu.com/upload/information/20200622/114/33081.jpg', // url: "http://www.htmleaf.com/" }, { // img: require("../assets/liaojiewaibao.png"), img: "https://cache.yisu.com/upload/information/20200622/114/33082.jpg", // url: "http://www.htmleaf.com/" }, { img: require("../assets/ruhui.png"), img: "https://cache.yisu.com/upload/information/20200622/114/33083.png", // url: "http://www.htmleaf.com/" }, { // img: require("../assets/callme.png"), img: "https://cache.yisu.com/upload/information/20200622/114/33084.jpg", // url: "http://www.htmleaf.com/" }, ] ); } } }; </script> <style lang="scss"> .broadcast { /* postercarousel */ #postercarousel { width: 100% !important; height: 450px; } .postercarousel { position: relative; height: 100%; width: 100% !important; } .postercarousel img { max-width: 100%; max-height: 100%; border: 0 none; background: #888; display: block; } .postercarousel .contentHolder { position: relative; overflow: hidden; } .postercarousel .contentHolderUnit { cursor: pointer; position: absolute; width: 83% !important; height: 450px; } .postercarousel .contentHolderUnit a.elementLink { display: block; overflow: hidden; z-index: 3; position: absolute; left: 0; right: 0; width: 100%; height: 100%; } .postercarousel .contentHolderUnit img { width: 100%; height: 100%; display: block; } .postercarousel .contentHolderUnit .elementTitle { } .postercarousel .contentHolderUnit .elementOverlay { z-index: 1; position: absolute; top: 0; left: 0; background: #000; width: 100%; height: 100%; opacity: 0; filter: opacity=0; } .postercarousel .contentHolderUnit .leftShadow { position: absolute; top: 23px; left:-250px; // width: 250px; height:327px; background: url("../assets/images/leftShadow.png") no-repeat; background-size: contain; } .postercarousel .contentHolderUnit .rightShadow { position: absolute; top: 23px; right:134px; height: 327px; background: url("../assets/images/rightShadow.png") no-repeat; background-size: contain; } .postercarousel .bannerControls { } .postercarousel .leftNav, .postercarousel .rightNav { cursor: pointer; z-index: 10; position: absolute; top: 60%; width: 45px; height: 45px; margin-top: -43px; } .postercarousel .leftNav { left: 7px; background: url("../assets/images/1.png") no-repeat; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_prev_btn.png"); } .postercarousel .rightNav { right: 7px; background: url("../assets/images/2.png") no-repeat; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_next_btn.png"); } .postercarousel .leftNav:hover { } .postercarousel .rightNav:hover { } .postercarousel .bottomNav { z-index: 140; position: absolute; width: 100%; height: 10px; margin-top: 400px; padding: 10px 0 0; text-align: center; } .postercarousel .bottomNavButtonOFF { cursor: pointer; overflow: hidden; display: inline-block; *display: inline; *zoom: 1; width: 10px; height: 10px; margin: 0 5px; vertical-align: top; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #c3c3c3; } .postercarousel .bottomNavButtonOFF:hover { background: #aaa; } .postercarousel .bottomNavButtonON, .postercarousel .bottomNavButtonON:hover { background: #69aaec; } .postercarousel .bottomNavLeft { } .postercarousel .bottomNavRight { } } </style>
关于vue.js中怎么实现一个层叠轮播效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。