这是一款非常实用的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 < this.itemsCount - 1 ? this.current + 1 : 0;
// show next item
this.$items.eq( this.current ).addClass('cbp-qtcurrent');
},
_startProgress : function() {
setTimeout( $.proxy( function() {
this.$progress.css( { transition : 'width ' + this.options.interval + 'ms linear', width : '100%' } );
}, this ), 25 );
},
_resetProgress : function() {
this.$progress.css( { transition : 'none', width : '0%' } );
},
destroy : function() {
if( this.support ) {
this.$items.css( 'transition', 'none' );
this.$progress.remove();
}
this.$items.removeClass( 'cbp-qtcurrent' ).css( {
'position' : 'relative',
'z-index' : 100,
'pointer-events' : 'auto',
'opacity' : 1
} );
}
};
var logError = function( message ) {
if ( window.console ) {
window.console.error( message );
}
};
$.fn.cbpQTRotator = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'cbpQTRotator' );
if ( !instance ) {
logError( "cannot call methods on cbpQTRotator prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for cbpQTRotator instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'cbpQTRotator' );
if ( instance ) {
instance._init();
}
else {
instance = $.data( this, 'cbpQTRotator', new $.CBPQTRotator( options, this ) );
}
});
}
return this;
};
} )( jQuery, window );
