首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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层叠轮播效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

执着的小猪仔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
Bootstrap 附加导航（Affix）插件实例详解
Jun 01 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
js实现小时钟效果
Mar 25 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
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
长波(3) 中波(3) 电台频率(32) 保养(1) 调频(4) ad hoc(1) KDKA(1) 收音机(62) 立体声(1) Harman Kardon(1)
You might like
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php中请求url的五种方法总结
2017/07/13 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue数据初始化initState的实例详解
2019/04/11 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
python zip()函数的使用示例
2020/09/23 Python
Myprotein瑞典官方网站：畅销欧洲英国运动营养品牌
2018/01/22 全球购物
英国外籍人士的在线超市：British Corner Shop
2019/06/03 全球购物
.net笔试题
2014/03/03 面试题
教育实习生的自我评价分享
2013/11/21 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书