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；
代码如下：
(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+'" 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" 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);
},
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="@/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层叠轮播的更多相关文章
- 纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- js原生轮播
js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...
- js实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
随机推荐
- PHP5+标准函数库观察者之实现
PHP的观察者设计模式实现相对简单,可是PHP5+版本号中已经有标准库类库支持,我们仅仅需简单继承并实现就能够了. 观察者:实现标准接口类库SplSubject. 一个注冊方法:attach.一个取消 ...
- win7_32虚拟机网络设置
今天工作中同事需要使用ie8的浏览器,组内同事没有,想到自己玩的win7_32虚拟机上有ie8,想让对方连接使用,发现自己本机可以远程连接,同事不能连接 排查原因:可能虚拟机使用的是nat模式连接的网 ...
- Android休眠唤醒机制简介（二）
本文转载自:http://blog.csdn.net/zhaoxiaoqiang10_/article/details/24408911 Android休眠唤醒机制简介(二)************* ...
- org.hibernate.AnnotationException: @OneToOne or @ManyToOne on com.demo.pojo.IdCard
转自:https://blog.csdn.net/zheng0518/article/details/11029733 TestStudent.testSchemaExporttestSchemaEx ...
- C语言程序判断文件夹是否存在
#include <stdio.h> #include <io.h> int main(void){ if ( !access("C://Users/hui" ...
- 搭建go开发环境
一.go下载安装 进入该网站 https://golang.google.cn/dl/ 选择相应的操作系统下载安装包 Linux/Mac OS X 安装 1.下载 go1.10.3.linux-am ...
- Cracking the Coding Interview 8.7
Given a infinite number of quarters(25cents), dimens(10cents), nickels(5cents) and pennies(1cent), w ...
- 虚拟机下不能运行gazebo
bug描述: VMware: vmw_ioctl_command error Invalid argument. 解决方式:设置环境变量 export SVGA_VGPU10=0 或者 echo &q ...
- windows phone控件
常用控件: 包括: Button控件.CheckBox控件.HyperlinkButton控件.Iamege控件.ListBox控件.PasswordBox控件.ProgressBar控件.Radio ...
- React+Dva
Reducer reducer 是一个函数,接受 state 和 action,返回老的或新的 state .即:(state, action) => state Effect app.mode ...