摩天轮旋转轮播

 http://bkvalve.mmler.cn/products/butterfly-valve/

        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');

        });