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