私はワードプレスにflexiquoterotatorを使用しています。次のボタンと前のボタンを表示するように微調整しました。次のコードは私のコードです
function ($) {
var callquote;
quoteRotator = {
i: 1,
quotes: [";
$i=0;
foreach($results as $result){
echo "\"$openquote<span id='quote'>$result->quote</span>$closequote";
if($result->author != '')
echo " <span id='quoteauthor'>$result->author</span>";
echo "\",\n";
$i++;
}
],
numQuotes: ".$i.",
fadeDuration: ".$fade.",
fadeoutDuration: ".$fadeout.",
delay: ".$delay.",
quotesInit: function(){
if (this.numQuotes < 1){
document.getElementById('quoterotator').innerHTML=\"No Quotes Found\";
} else {
this.navQuote();
this.quoteRotate();
this.quotehover();
}
},
navQuote: function() {
$('<div id=\"quotenav\"></div>').insertAfter('#quotearea');
for (n=1; n <= this.numQuotes ; n++) {
}
$('#quotenav').append('<span onclick=\"quoteRotator.callQuote(this,'+n+')\">Next</span>');
for (k= -3; k <= this.numQuotes ; k++) {
}
$('#quotenav').append('<span id=\"test\" onclick=\"quoteRotator.callQuote(this,'+k+')\">Prev</span>');
// insert style
$('head').append('<style type=\"text/css\">#quotenav {display: block;text-align: center;font-size: 50px;color: #000;}#quotenav span {margin: 0 3px;cursor: pointer;}#quotenav span.active,#quotenav span:hover{color: red;}</style>');
},
quoteRotate: function(i){
if(!i) {
i = this.i;
}
$('#quotenav span').each(function () {
$(this).removeClass('active');
});
$('#quotenav span:nth-child('+i+')').addClass('active');
jQuery('#quoterotator').hide().html(this.quotes[i - 1]).fadeIn(this.fadeDuration * 1000).css('filter','');
this.i = i % (this.numQuotes) + 1;
callquote = setTimeout('quoteRotator.quoteRotate()', (this.delay + this.fadeDuration) * 1000);
},
callQuote: function(e,n) {
clearTimeout(callquote);
this.quoteRotate(n);
},
quotehover: function() {
jQuery('#quotearea').mouseenter(function () {
clearTimeout(callquote);
}).mouseleave(function(){
setTimeout('quoteRotator.quoteRotate()', 500);
});
}
}
})(jQuery);
上記のコードは、次のボタンと前のボタンを表示せず、代わりにドットベースのナビゲーションで機能します。