摩天轮旋转轮播
Posted gduf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了摩天轮旋转轮播相关的知识，希望对你有一定的参考价值。
var item = $(‘.p02-1-s1 .tab > li‘);
item.click(function() {
$(this)
.addClass(‘current‘)
.siblings()
.removeClass(‘current‘);
item.find(‘li‘).removeClass(‘active‘);
});
item.find(‘li‘).click(function(event) {
event.stopPropagation();
item.find(‘li‘).removeClass(‘active‘);
$(this).addClass(‘active‘);
item.removeClass(‘current‘);
$(this).parents(‘li‘).addClass(‘current‘);
});
var item2 = $(‘.p02-1-s2 .tab > li‘);
item2.click(function() {
item2.removeClass(‘current‘);
var clickIndex = $(this)
.addClass(‘current‘)
.index();
$(‘.p02-1-s2 .text-slider > li‘)
.removeClass(‘active‘)
.eq(clickIndex)
.addClass(‘active‘);
});
var getDirection = (function() {
var mark = ‘back‘;
return function(activeIndex, prevIndex) {
var direction = activeIndex > prevIndex ? ‘forward‘ : ‘back‘;
// 修正运动方向
if ((prevIndex === 0 && activeIndex === 3) || (prevIndex === 3 && activeIndex === 0)) {
direction = mark === ‘back‘ ? ‘back‘ : ‘forward‘;
}
return (mark = direction);
};
})();
var initStyles = (function() {
var count = 0;
var translates = [‘translate(50%, -50%)‘,‘translate(-50%, -50%)‘,‘translate(-50%, -50%)‘,‘translate(-50%, 50%)‘];
return function(activeIndex, prevIndex) {
var direction = getDirection(activeIndex, prevIndex);
var deviation = $(window).width() > 1366 ? 0 : 1;
var deg, cssRotate, transition;
count += direction === ‘forward‘ && activeIndex === 0 ? 1 : direction === ‘back‘ && activeIndex === 3 ? -1 : 0;
deg = (activeIndex + deviation) * 90 + count * 360;
cssRotate = ‘ rotate(‘ + -deg + ‘deg) ‘;
transition = ‘all .5s ease-in-out 0s‘;
$(‘.p02-1-s4 .box‘).css({
transform: ‘rotate(‘ + deg + ‘deg)‘,
transition: transition
}).children(‘img‘).css({
transform: cssRotate,
transition: transition
}).parent().find(‘li‘).each(function(index) {
this.style = ‘transform:‘ + translates[index] + cssRotate + ‘;transition:‘ + transition;
this.className = index === activeIndex ? ‘current‘ : ‘‘;
});
};
})();
initStyles(0, 3);
$(window).resize(function () {
initStyles(0, 3);
});
var s4 = new Swiper(‘#s4‘, {
watchOverflow: true,
navigation: {
prevEl: ‘.p02-1-s4 .prev‘,
nextEl: ‘.p02-1-s4 .next‘
},
on: {
slideChange: function() {
if ($(window).width() > 768) {
initStyles(this.activeIndex, this.previousIndex);
}
$(‘.p02-1-s4 .mobile-icon li‘).eq(this.activeIndex).addClass(‘current‘).siblings().removeClass(‘current‘);
}
}
});
$(‘.p02-1-s4 .tab li‘).click(function() {
s4.slideTo($(this).index(), 200, false);
$(this)
.addClass(‘current‘)
.siblings()
.removeClass(‘current‘);
});
$(‘.p02-1-s4 .mobile-icon li‘).click(function() {
s4.slideTo($(this).index(), 200, false);
$(this)
.addClass(‘current‘)
.siblings()
.removeClass(‘current‘);
});
以上是关于摩天轮旋转轮播的主要内容，如果未能解决你的问题，请参考以下文章