html5+jQuery图片和文字内容同时左右切换特效免费下载

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>
打赏
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录