jQuery和css3自动轮换的用户评论留言插件

这是一款非常实用的jQuery和css3自动轮换的用户评论留言插件。该用户评论插件通过进度条来控制用户评论显示的时间，当进度条到达100%时，该插件自动播放下一条用户留言。该插件同样通过media query媒体查询来处理各种屏幕的响应式问题。

HTML结构

<div id="cbp-qtrotator" class="cbp-qtrotator">
  <div class="cbp-qtcontent">
    <img src="images/1.jpg" alt="img01" />
    <blockquote>
      <p>People eat meat and think they will become as strong as an ox, forgetting that the ox eats grass.</p>
      <footer>Pino Caruso</footer>
    </blockquote>
  </div>
  <div class="cbp-qtcontent">
    <!-- ... -->
  </div>
  <div class="cbp-qtcontent">
    <!-- ... -->
  </div>
  <div class="cbp-qtcontent">
    <!-- ... -->
  </div>
</div>
                

CSS样式

插件中用户留言面板的CSS样式非常简单，你可以构建自己的CSS样式来使它更加漂亮。

.cbp-qtrotator {
  position: relative;
  margin: 3em auto 5em auto;
  max-width: 800px;
  width: 100%;
  min-height: 400px;
}

.cbp-qtrotator .cbp-qtcontent {
  position: absolute;
  min-height: 200px;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  padding: 2em 0;
  top: 0;
  z-index: 0;
  opacity: 0;
  width: 100%;
}

.no-js .cbp-qtrotator .cbp-qtcontent {
  border-bottom: none;
}

/* Currently visible */
.cbp-qtrotator .cbp-qtcontent.cbp-qtcurrent,
.no-js .cbp-qtrotator .cbp-qtcontent {
  position: relative; 
  z-index: 100;
  pointer-events: auto;
  opacity: 1;
}

.cbp-qtrotator .cbp-qtcontent:before,
.cbp-qtrotator .cbp-qtcontent:after {
  content: " ";
  display: table;
}

.cbp-qtrotator .cbp-qtcontent:after {
  clear: both;
}

.cbp-qtprogress {
  position: absolute;
  background: #47a3da;
  height: 1px;
  width: 0%;
  top: 0;
  z-index: 1000;
}

.cbp-qtrotator blockquote {
  margin: 0;
  padding: 0;
}

.cbp-qtrotator blockquote p {
  font-size: 2em;
  color: #888;
  font-weight: 300;
  margin: 0.4em 0 1em;
}

.cbp-qtrotator blockquote footer {
  font-size: 1.2em;
}

.cbp-qtrotator blockquote footer:before {
  content: '? ';
}

.cbp-qtrotator .cbp-qtcontent img {
  float: right;
  margin-left: 3em;
}

/* Example for media query */
@media screen and (max-width: 30.6em) { 

  .cbp-qtrotator {
    font-size: 70%;
  }

  .cbp-qtrotator img {
    width: 80px;
  }

}
                

JAVASCRIPT

有几个可用参数可以使用：

• speed：CSS动画过渡的时间，单位毫秒，默认值为700ms。
• easing：CSS动画的类型，默认值为easing。
• interval：进度条每次从0走到100%的时间(用户评论显示的时间)。单位毫秒，默认值为8000ms。

代码如下：

;( function( $, window, undefined ) {
  'use strict';
  // global
  var Modernizr = window.Modernizr;
  $.CBPQTRotator = function( options, element ) {
    this.$el = $( element );
    this._init( options );
  };

  // the options
  $.CBPQTRotator.defaults = {
    // default transition speed (ms)
    speed : 700,
    // default transition easing
    easing : 'ease',
    // rotator interval (ms)
    interval : 8000
  };

  $.CBPQTRotator.prototype = {
    _init : function( options ) {

      // options
      this.options = $.extend( true, {}, $.CBPQTRotator.defaults, options );
      // cache some elements and initialize some variables
      this._config();
      // show current item
      this.$items.eq( this.current ).addClass( 'cbp-qtcurrent' );
      // set the transition to the items
      if( this.support ) {
        this._setTransition();
      }
      // start rotating the items
      this._startRotator();

    },
    _config : function() {

      // the content items
      this.$items = this.$el.children( 'div.cbp-qtcontent' );
      // total items
      this.itemsCount = this.$items.length;
      // current item´s index
      this.current = 0;
      // support for CSS Transitions
      this.support = Modernizr.csstransitions;
      // add the progress bar
      if( this.support ) {
        this.$progress = $( '' ).appendTo( this.$el );
      }

    },
    _setTransition : function() {
      setTimeout( $.proxy( function() {
        this.$items.css( 'transition', 'opacity ' + this.options.speed + 'ms ' + this.options.easing );
      }, this ), 25 );
    },
    _startRotator: function() {

      if( this.support ) {
        this._startProgress();
      }

      setTimeout( $.proxy( function() {
        if( this.support ) {
          this._resetProgress();
        }
        this._next();
        this._startRotator();
      }, this ), this.options.interval );

    },
    _next : function() {

      // hide previous item
      this.$items.eq( this.current ).removeClass( 'cbp-qtcurrent' );
      // update current value
      this.current = this.current