レスポンシブのサイトでマウスオーバーでスライドショーを作る機会があったのでメモ書き

Jqueryのソース

var setMainId = ‘スライダーのulの親クラス名’;
var setThumbId = ‘スライダーのサムネイルのulの親クラス’;
//スライドする時間
var slideTime = 200;

//開いてる機種の判定
var ua = navigator.userAgent;

var sliderWidth = $(setMainId).width();
var sliderHeight = $(setMainId).height();

var listWidth = parseInt($(setMainId).children(‘ul’).children(‘li’).css(‘width’));
var listCount = $(setMainId).children(‘ul’).children(‘li’).length;

var ulWidth = (listWidth) * (listCount);
var sp_width = 0;

$(window).on(‘ready resize’, function () {
sliderWidth = $(setMainId).width();
sliderHeight = $(setMainId).height();

listWidth = parseInt($(setMainId).children(‘ul’).children(‘li’).css(‘width’));
listCount = $(setMainId).children(‘ul’).children(‘li’).length;

if (ua.indexOf(‘iPhone’) > 0 || ua.indexOf(‘Android’) > 0 && ua.indexOf(‘Mobile’) > 0) {

sp_width = $(setMainId).parents(‘.mf-frame’).width();
ulWidth = (sp_width) * (listCount);

} else if (ua.indexOf(‘iPad’) > 0 || ua.indexOf(‘Android’) > 0) {

ulWidth = (sliderWidth) * (listCount);

} else {

ulWidth = (sliderWidth) * (listCount);

}

$(setMainId + ‘ > ul’).css({
width: (ulWidth),
height: (sliderHeight)
});

$(setMainId + ‘ > ul > li’).css({
width: ulWidth / listCount
});

$(setMainId).css({
height: $(setMainId + ‘ > ul > li’).innerHeight()
});

});

$(setMainId).each(function () {

$(setMainId + ‘ > ul’).css({
width: (ulWidth),
height: (sliderHeight)
});
$(setMainId + ‘ > ul > li’).css({
width: ulWidth / listCount
});

$(setMainId).css({
height: $(setMainId + ‘ > ul > li’).innerHeight()
});

$(setThumbId + ‘ > ul > li:first’).addClass(‘active’);
$(setThumbId + ‘ > ul > li’).css({
opacity: ‘0.7’,
});

$(setThumbId + ‘ > ul > li’).hover(function () {

$(this).stop().animate({
opacity: ‘1’
}, 300);
var connectCont = $(setThumbId + ‘ > ul > li’).index(this);
$(setMainId + ‘ > ul’).stop().animate({
left: (-(sliderWidth) * (connectCont))
}, slideTime);
$(setThumbId + ‘ > ul > li’).removeClass(‘active’);
$(this).addClass(‘active’);

}, function () {
if (ua.indexOf(‘iPhone’) > 0 || ua.indexOf(‘Android’) > 0 && ua.indexOf(‘Mobile’) > 0) {

} else {
$(this).stop().animate({
opacity: ‘0.7’
}, 300);
}
});

$(setThumbId + ‘ > ul > li’).click(function () {

$(setThumbId + ‘ > ul > li’).stop().animate({
opacity: ‘0.7’
}, 300);
$(this).stop().animate({
opacity: ‘1’
}, 300);
var connectCont = $(setThumbId + ‘ > ul > li’).index(this);
$(setMainId + ‘ > ul’).stop().animate({
left: (-(sliderWidth) * (connectCont))
}, slideTime);
$(setThumbId + ‘ > ul > li’).removeClass(‘active’);
$(this).addClass(‘active’);

});

});