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

最新推荐文章于 2024-08-16 11:35:31 发布

霜如明月

最新推荐文章于 2024-08-16 11:35:31 发布

阅读量2.9k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/q3254421/article/details/87990783

版权

这篇博客分享了一种使用Vue.js、JavaScript和jQuery实现的层叠式轮播组件。作者在项目中遇到了普通UI框架无法满足的需求，因此自行编写了这个组件。文中并未详细阐述实现思路，而是直接提供了相关代码供读者参考。在Vue项目中使用该组件前，需要通过npm安装jQuery并进行webpack配置。此外，作者还鼓励大家加入前端全栈学习交流圈，以便共同进步。

摘要由CSDN通过智能技术生成

最近写公司项目有涉及到轮播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);