HTML5特效库炫酷复仇者联盟电影幻灯片切换动画

Mation梁 04-19 249

前言：

眼前咱们对“html5跳转效果”可能比较讲究，各位老铁们都想要知道一些“html5跳转效果”的相关文章。那么小编同时在网络上收集了一些关于“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 href="" target="_blank" class="demo-cont__credits-link">My codepen</a>

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

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

<a href="" 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>

本文地址：http://www.longkongtuishu.com/caf8bAmsLA1IADw.html

标签： #html5跳转效果 #html5特效网 #html5点击按钮切换图片

HTML5特效库 炫酷复仇者联盟电影幻灯片切换动画