网络编程 发布日期：2025/10/24 浏览次数：1
最近写公司项目有涉及到轮播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；
代码如下：
(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" style="display: block;"></div> <div class="rightNav" style="display: block;"></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="/UploadFiles/2021-04-02/'+this.data[item].img+'">
相关vue组件代码以及使用方式：
代码如下：
<template>
<div class="broadcast">
<div class="htmleaf-container">
<div class="htmleaf-content">
<div id="postercarousel" style="margin:40px auto 0 auto;"></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: 'http://occe.ospc.cn/upload/2016-01-18/145309107223576.jpg',
// url: "http://www.htmleaf.com/"
},
{
// img: require("../assets/liaojiewaibao.png"),
img: "http://occe.ospc.cn/upload/2016-01-17/145302166917282.jpg",
// url: "http://www.htmleaf.com/"
},
{
img: require("../assets/ruhui.png"),
img: "http://occe.ospc.cn/upload/2016-01-17/14530216405007.png",
// url: "http://www.htmleaf.com/"
},
{
// img: require("../assets/callme.png"),
img: "http://occe.ospc.cn/upload/2016-01-18/145309108911041.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="/UploadFiles/2021-04-02/slide_prev_btn.png">
总结
以上所述是小编给大家介绍的vue.js层叠轮播效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！