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

})()

總結

以上是生活随笔為你收集整理的html5内容切换特效,html5+jQuery图片和文字内容同时左右切换特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。