码迷,mamicode.com
首页 > 其他好文 > 详细

摩天轮旋转轮播

时间:2019-12-24 18:28:11      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:class   translate   inf   ota   move   alt   classname   res   png   

技术图片

 

 

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

摩天轮旋转轮播

标签:class   translate   inf   ota   move   alt   classname   res   png   

原文地址:https://www.cnblogs.com/gduf/p/12092651.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!