HTML5特效庫炫酷復仇者聯盟電影幻燈片切換動畫

果圖

各位長友大家好！

今天給大家帶來的是炫酷復仇者聯盟電影幻燈片切換動畫！

大家可以按照自己的意愿，進行修改，做成自己喜歡的樣子！

想要文件版本的源碼，請看評論區！

廢話不多說，上源碼！

JS源碼：

(function() {

var $$=function(selector, context) {

var context=context || document;

var elements=context.querySelectorAll(selector);

return [].slice.call(elements);

};

function _fncSliderInit($slider, options) {

var prefix=".fnc-";

var $slider=$slider;

var $slidesCont=$slider.querySelector(prefix + "slider__slides");

var $slides=$$(prefix + "slide", $slider);

var $controls=$$(prefix + "nav__control", $slider);

var $controlsBgs=$$(prefix + "nav__bg", $slider);

var $progressAS=$$(prefix + "nav__control-progress", $slider);

var numOfSlides=$slides.length;

var curSlide=1;

var sliding=false;

var slidingAT=+parseFloat(getComputedStyle($slidesCont)["transition-duration"]) * 1000;

var slidingDelay=+parseFloat(getComputedStyle($slidesCont)["transition-delay"]) * 1000;

var autoSlidingActive=false;

var autoSlidingTO;

var autoSlidingDelay=5000; // default autosliding delay value

var autoSlidingBlocked=false;

var $activeSlide;

var $activeControlsBg;

var $prevControl;

function setIDs() {

$slides.forEach(function($slide, index) {

$slide.classList.add("fnc-slide-" + (index + 1));

});

$controls.forEach(function($control, index) {

$control.setAttribute("data-slide", index + 1);

$control.classList.add("fnc-nav__control-" + (index + 1));

});

$controlsBgs.forEach(function($bg, index) {

$bg.classList.add("fnc-nav__bg-" + (index + 1));

});

};

setIDs();

function afterSlidingHandler() {

$slider.querySelector(".m--previous-slide").classList.remove("m--active-slide", "m--previous-slide");

$slider.querySelector(".m--previous-nav-bg").classList.remove("m--active-nav-bg", "m--previous-nav-bg");

$activeSlide.classList.remove("m--before-sliding");

$activeControlsBg.classList.remove("m--nav-bg-before");

$prevControl.classList.remove("m--prev-control");

$prevControl.classList.add("m--reset-progress");

var triggerLayout=$prevControl.offsetTop;

$prevControl.classList.remove("m--reset-progress");

sliding=false;

var layoutTrigger=$slider.offsetTop;

if (autoSlidingActive && !autoSlidingBlocked) {

setAutoslidingTO();

}

};

function performSliding(slideID) {

if (sliding) return;

sliding=true;

window.clearTimeout(autoSlidingTO);

curSlide=slideID;

$prevControl=$slider.querySelector(".m--active-control");

$prevControl.classList.remove("m--active-control");

$prevControl.classList.add("m--prev-control");

$slider.querySelector(prefix + "nav__control-" + slideID).classList.add("m--active-control");

$activeSlide=$slider.querySelector(prefix + "slide-" + slideID);

$activeControlsBg=$slider.querySelector(prefix + "nav__bg-" + slideID);

$slider.querySelector(".m--active-slide").classList.add("m--previous-slide");

$slider.querySelector(".m--active-nav-bg").classList.add("m--previous-nav-bg");

$activeSlide.classList.add("m--before-sliding");

$activeControlsBg.classList.add("m--nav-bg-before");

var layoutTrigger=$activeSlide.offsetTop;

$activeSlide.classList.add("m--active-slide");

$activeControlsBg.classList.add("m--active-nav-bg");

setTimeout(afterSlidingHandler, slidingAT + slidingDelay);

};

function controlClickHandler() {

if (sliding) return;

if (this.classList.contains("m--active-control")) return;

if (options.blockASafterClick) {

autoSlidingBlocked=true;

$slider.classList.add("m--autosliding-blocked");

}

var slideID=+this.getAttribute("data-slide");

performSliding(slideID);

};

$controls.forEach(function($control) {

$control.addEventListener("click", controlClickHandler);

});

function setAutoslidingTO() {

window.clearTimeout(autoSlidingTO);

var delay=+options.autoSlidingDelay || autoSlidingDelay;

curSlide++;

if (curSlide > numOfSlides) curSlide=1;

autoSlidingTO=setTimeout(function() {

performSliding(curSlide);

}, delay);

};

if (options.autoSliding || +options.autoSlidingDelay > 0) {

if (options.autoSliding===false) return;

autoSlidingActive=true;

setAutoslidingTO();

$slider.classList.add("m--with-autosliding");

var triggerLayout=$slider.offsetTop;

var delay=+options.autoSlidingDelay || autoSlidingDelay;

delay +=slidingDelay + slidingAT;

$progressAS.forEach(function($progress) {

$progress.style.transition="transform " + (delay / 1000) + "s";

});

}

$slider.querySelector(".fnc-nav__control:first-child").classList.add("m--active-control");

};

var fncSlider=function(sliderSelector, options) {

var $sliders=$$(sliderSelector);

$sliders.forEach(function($slider) {

_fncSliderInit($slider, options);

});

};

window.fncSlider=fncSlider;

}());

/* not part of the slider scripts */

/* Slider initialization

options:

autoSliding - boolean

autoSlidingDelay - delay in ms. If audoSliding is on and no value provided, default value is 5000

blockASafterClick - boolean. If user clicked any sliding control, autosliding won't start again

fncSlider(".example-slider", {autoSlidingDelay: 4000});

var $demoCont=document.querySelector(".demo-cont");

[].slice.call(document.querySelectorAll(".fnc-slide__action-btn")).forEach(function($btn) {

$btn.addEventListener("click", function() {

$demoCont.classList.toggle("credits-active");

});

document.querySelector(".demo-cont__credits-close").addEventListener("click", function() {

$demoCont.classList.remove("credits-active");

});

document.querySelector(".js-activate-global-blending").addEventListener("click", function() {

document.querySelector(".example-slider").classList.toggle("m--global-blending-active");

});

index：

<!DOCTYPE html>

<html >

<head>

<title>html5 幻燈片切換動畫</title>

</head>

<body>

</div>

<span>Black</span>

</div>

<span>Widow</span>

</div>

</h2>

Credits

<span data-text="Credits">Credits</span>

</button>

</div>

</div>

<span>Captain</span>

</div>

<span>America</span>

</div>

</h2>

Credits

<span data-text="Credits">Credits</span>

</button>

</div>

</div>

</div>

</div>

</h2>

Credits

<span data-text="Credits">Credits</span>

</button>

</div>

</div>

</div>

</div>

</h2>

Credits

<span data-text="Credits">Credits</span>

</button>

</div>

</div>

</div>

Black Widow

</button>

Captain America

</button>

Iron Man

</button>

Thor

</button>

</div>

</nav>

</div>

<h3 class="demo-cont__credits-name">Nikolay Talanov</h3>

<a target="_blank" class="demo-cont__credits-link">My codepen</a>

<a target="_blank" class="demo-cont__credits-link">My twitter</a>

<h2 class="demo-cont__credits-heading">Based on</h2>

<a target="_blank" class="demo-cont__credits-link">Concept by Kreativa Studio</a>

<h4 class="demo-cont__credits-blend">Global Blend Mode</h4>

</span>

</label>

</div>

</body>

</html>

av元素是什么？

Nav元素用于定義導航鏈接，是HTML5新增的元素，該元素可以將具有導航性質的鏈接歸納在一個區域中，使頁面元素的語義更加明確。其中的導航元素可以鏈接到站點的其他頁面或者當前頁的其他部分。

Nav元素可以用作頁面導航的鏈接組，在導航鏈接組里面有很多的鏈接，點擊每個鏈接可以鏈接到其他頁面或者當前頁面的其他部分，并不是所有的鏈接組都要被放在Nav元素里面，只需要把最主要的、基本的、重要的放在Nav元素里面即可。

示例代碼：

Nav元素示例代碼

在上面這段代碼中，通過在Nav元素內部嵌套無序列表ul來搭建導航結構。通常一個HTML頁面中可以包含多個Nav元素，作為頁面整體或不同部分的導航。

具體來說Nav元素可以用的場景如下：

1.傳統導航條：目前主流網站上都有不同層級的導航條，其作用是跳轉到網站的其他主頁面。

2.側邊欄導航：目前主流博客網站及電商網站都有側邊欄導航，目的是將當前文章或當前商品頁面跳轉到其他文章或其他商品頁面。

3.頁內導航：它的作用是在本頁面幾個主要的組成部分之間進行跳轉。

4.翻頁操作：翻頁操作切換的是網頁的內容部分，可以通過單擊“上一頁”或“下一頁”切換，也可以通過單擊實際的頁數跳轉到某一頁。

除此Nav元素也可以用于其他重要的、基本的導航鏈接組中。并不是所有的鏈接組都要被放進Nav元素，只需要將主要的和基本的鏈接放進Nav元素即可。

T之家訊隨著HTML5技術的廣泛運用，Adobe Flash技術越來越不受人待見，目前谷歌旗下全球最大的視頻網站YouTube已經成功完成了從Flash到HTML5的切換，現在又有一家流行的網絡服務公司要拋棄Flash了，它就是著名游戲直播平臺Twitch。

Twitch今日宣布將于2016年第二季度完成Flash到HTML5的轉換，全面采用H5技術，徹底拋棄Flash。該公司是在舊金山Moscone中心舉行的首屆社區大會上宣布的。

Twitch表示，HTML5技術有助于將其服務帶往更多平臺，不需要再操心第三方應用的支持問題。

在線咨詢

上一篇：ionic 教程-安裝-創建 APP-頭部與底部
下一篇：想學HTML5需要什么條件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5特效庫 炫酷復仇者聯盟電影幻燈片切換動畫

JS源碼：

index：

您的項目需求

HTML5特效庫炫酷復仇者聯盟電影幻燈片切換動畫