html5+jQuery图片和文字内容同时左右切换特效，点击图片或者点击左右按钮进行切换，图片转动以及文字内容动画效果切换。

查看演示

下载资源：

22

次 下载资源

下载积分：

20

积分

js代码

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

})()