html5+jQuery图片和文字内容同时左右切换特效【原创】

js代码

<script type="text/javascript">

            (function(){
                var bannerIndex = 0;
                var $bannerBgs = $('.js_banner-bg');
                var $bannerNotifications = $('.js_banner-notification');
                function changeTopBanner(index) {
                    $bannerBgs.removeClass('mui-enter-active');
                    $($bannerBgs[index]).addClass('mui-enter-active');

                    $bannerNotifications.removeClass('mui-enter-active');
                    $($bannerNotifications[index]).addClass('mui-enter-active');
                }

                setInterval(function(){
                    if (bannerIndex < 2) {
                        bannerIndex++;
                        changeTopBanner(bannerIndex);
                    } else {
                        bannerIndex = 0;
                        changeTopBanner(bannerIndex);
                    }
                }, 6000);

                // Function
                var functionIndex = 1;
                function presentScreen(index) {
                    $('.carousel').removeClass(
                        'present-screen-1 present-screen-2 present-screen-3'
                    ).addClass(`present-screen-${functionIndex}`);
                }

                var $titles = $('.js_function-text .title');
                var $descs = $('.js_function-text .desc');
                function presentText(index) {
                    index = index - 1;
                    $titles.removeClass('mui-enter-active');
                    $($titles[index]).addClass('mui-enter-active');
                    $descs.removeClass('mui-enter-active');
                    $($descs[index]).addClass('mui-enter-active');
                }

                var $functionScreens = $('.carousel .function-screen');
                for (var i = 0; i < $functionScreens.length; i++) {
                    (function (i) {
                        $($functionScreens[i]).click(function(){
                            functionIndex = i + 1;
                            presentScreen(functionIndex);
                            presentText(functionIndex);
                        })
                    })(i);
                }
                $('#js_function-orbit-prev').click(function(){
                    functionIndex > 1 ? functionIndex-- : functionIndex = 3;
                    presentScreen(functionIndex);
                    presentText(functionIndex);
                });
                $('#js_function-orbit-next').click(function(){
                    functionIndex < 3 ? functionIndex++ : functionIndex = 1;
                    presentScreen(functionIndex);
                    presentText(functionIndex);
                });

                var newsOrbit = new Foundation.Orbit($('#js_news-thumbnail'));


            })()
   
        </script>