サムネイルにマウスオーバーしてスライドショー
レスポンシブのサイトでマウスオーバーでスライドショーを作る機会があったのでメモ書き
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’);
});
});