vue.js层叠轮播效果的实例代码


Posted in Javascript onNovember 08, 2018

最近写公司项目有涉及到轮播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="'+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);
  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="@/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层叠轮播效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
vue观察模式浅析
Sep 25 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue-cli 构建骨架屏的方法示例
Nov 08 #Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 #Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 #Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 #Javascript
Angular设置别名alias的方法
Nov 08 #Javascript
vue-cli安装使用流程步骤详解
Nov 08 #Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 #Javascript
You might like
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php目录操作实例代码
2014/02/21 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
深入理解Node module模块
2018/03/26 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python中int()函数的用法浅析
2017/10/17 Python
django中send_mail功能实现详解
2018/02/06 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python修改txt文件中的某一项方法
2018/12/29 Python
python交互界面的退出方法
2019/02/16 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
结对共建工作方案
2014/06/02 职场文书
国际贸易实训总结
2015/08/03 职场文书
八年级语文教学反思
2016/03/03 职场文书