jQueryだけでコンテンツを自動スクロール表示してみる

ココナラの案件でクチコミを自動で流れるように表示したい！という依頼があったので何となく作ってみました。必要なライブラリはjQueryだけです。

※いまいち最適解がわからんです。。。修行が足りないっす。

⇒追記 自動スクロールするプラグイン作ってみた。
http://rei19.hatenablog.com/entry/2014/02/17/230531

HTML

<div id="impression">
    <div class="imp_area_title">お客様からの声</div>
    <ul class="imp_list">
    </ul>
</div>

CSS

#impression .imp_area_title{
    font-size:14px;
    margin-bottom:5px;
}
#impression .imp_list{
    width:100%;
    position: relative;
    z-index:1;
    list-style:none;
}
#impression .imp_outer{
    clear:both;
    margin-bottom:5px;
}

#impression .imp_icon_img{
    float:left;
}
#impression .imp_text{
    float:right;
    position:relative;
    width:80%;
}
#impression {
    height:480px;
    position: relative;
}
#impression .imp_box {
    position: relative;
    background: #DCDCDC;
    min-height:50px;
    height:auto !important;
    height:50px;
    margin-bottom: 20px;
    border-radius: 30px;
    padding: 15px;
    left:15px;
}
#impression .imp_box:before {
    content: '';
    position: absolute;
    background: #DCDCDC;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    top: 20px;
    left: -25px;
}
#impression .imp_box:after {
    content: '';
    position: absolute;
    background: #DCDCDC;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    top: 25px;
    left: -45px;
}

JavaScript

// クチコミ表示件数
var IMP_CNT = 4;
// スクロールスパン
var SCROLL_SPEED = 5000;
// クチコミデータ
var IMP_LIST = [
	{
		'sex' : '1',
		'age' : '40代',
		'text' : 'とっても助かりました。とっても助かりました。とっても助かりました。とっても助かりました。とっても助かりました。とっても助かりました。'
	},
	{
		'sex' : '1',
		'age' : '20代',
		'text' : '助かりました'
	},
	{
		'sex' : '0',
		'age' : '30代',
		'text' : '3件目のクチコミ'
	},
	{
		'sex' : '1',
		'age' : '40代',
		'text' : '？件目'
	},
	{
		'sex' : '1',
		'age' : '40代',
		'text' : 'てすと'
	},
	{
		'sex' : '0',
		'age' : '50代',
		'text' : '件目'
	}
];

$(function(){
    // クチコミ表示用エレメント
    var _$impList = $('#impression').find('.imp_list');
    // クチコミアクセス用インデックス
    var _idx_current = 0;
    // クチコミ初期表示データ格納用
    var _aryImp = [];
    // クチコミコンテンツ作成関数
    function makeImpression(_idx){
        var _impInfo = IMP_LIST[_idx];
        var _user = '';
        var _img = '';
        if(_impInfo.sex === '0'){
            _user = '男性';
            _img = 'http://jsrun.it/assets/s/j/V/b/sjVbz.png';
        }else{
            _user = '女性';
            _img = 'http://jsrun.it/assets/m/T/3/A/mT3Ap.png';
        }
        _user = _impInfo.age + ' ' + _user;
        var _$imp = $('<li>').addClass('imp_outer');
        var _$icon =
            $('<div>')
                .addClass('imp_icon_img')
                .html('<img src="' + _img + '"><br>[<span>' + _user + '</span>]');
        var _$text =
            $('<div>')
                .addClass('imp_text')
                .append($('<div>').addClass('imp_box').text(_impInfo.text));
        _$imp.append(_$icon).append(_$text).append('<div style="clear:both;"></div>');
        return _$imp;
    }
    // 自動スクロール関数
    function autoScroll(){
        // 一番上のコンテンツを取得
        var _$top = _$impList.find('.imp_outer').eq(0);
        // 追加表示用のインデックスを取得
        _idx_current = (++_idx_current < IMP_LIST.length)?_idx_current:0;
        // 一番上のコンテンツのopacityを0にして見えなくする
        _$top.animate({'opacity':0} ,500, function(){
            // クチコミ全体をクチコミ一つ分上にずらす
            _$impList.animate({'top':'-106px'}, 500, function(){
                // クチコミ全体の位置を元に戻して透明にしたクチコミを削除
                $(this).css('top', 0);
                _$top.remove();
                var _$imp = makeImpression(_idx_current);
                _$imp.hide();
                _$impList.append(_$imp);
                // クチコミを追加してフェード表示
                _$imp.fadeIn(500, function(){
                    setTimeout(autoScroll, SCROLL_SPEED);
                });
            });
        });
    }
    // 初期設定
    for(var _i=0;_i<IMP_CNT;_i++){
        _aryImp.push(makeImpression(_i));
        _idx_current = _i;
    }
    _$impList.append(_aryImp);
    setTimeout(autoScroll, SCROLL_SPEED);
});

実際に動かしてみた