読者です 読者をやめる 読者になる 読者になる

もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

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

JavaScript 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);
});

実際に動かしてみた