上一篇说了瀑布流，今天说一下小小幻灯片的故事。
幻灯片学名又叫 轮播。应当算是一种最经常运用的页面展现信息。之前因为ie6/7的拖累，致使我们只能运用，很陈旧的体式格局去兼容。(我最爱的css3啊~~~)。不过本年真的是前端的幸运年，种种 polyfill 和 shim，而且如今各大公司已对ie6/7不予理睬，直接给他一个提示页面(老子让你用ie6/7)。而且IE的爸爸，ms已表态了，我当初是怎样生下你来的，太tm丑了，因为开放二胎，ms已孵化了edge(原名斯巴达)，如今基础上是前端的黄金时代了。这里我重要引见一种比较有用的轮播结果。
简朴轮播
轮播，在各大网站都是运用，比方在淘宝首页(兼容性比较好), 网易云音乐首页等等。 能够说，写轮播应当算是前端的一个必修课程吧。 我这里就挑一个最简朴的完成。
这里完成轮播的手艺，重要依靠与css3，js只是作为一个切换class名的作用(只要不写js都简朴)。
轮播道理
这里先说一下基础道理吧， 就是将图片 向左或向右移，然后接着显现下一张，或许上一张。
特么，逗我呢。你不说我也晓得哎喂。
咳咳~
我们来看一下，html部份吧。
<div class="sliderCon">
<ul>
<li class="current"><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/1.jpg" alt=""></li>
<li><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/2.jpg" alt=""></li>
<li><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/3.jpg" alt=""></li>
<li><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/4.jpg" alt=""></li>
<li><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/5.jpg" alt=""></li>
</ul>
</div>这里就是经由过程ul包裹多个li完成的轮播。(这里须要谢谢一下爱编程供应的图片)
接着重头戏就是css3。
看~
.sliderCon {
width: 100%;
max-width: 100%;
height: 100%;
position: relative;
text-align: center;
ul {
display: inline-block;
position: relative;
width: 450px;
padding: 0;
perspective: 1400px;
li {
width: 450px;
height: 290px;
position: absolute;
list-style: none;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
z-index: 1000;
text-align: center;
&.navOutNext {
animation: rotate3DSlideOutLeft 0.3s forwards;
}
&.navInNext {
animation: rotate3DSlideInRight 0.3s 0.1s forwards;
}
&.navOutPre{
animation: rotate3DSlideOutLeft 0.3s forwards;
}
&.navInPre{
animation: rotate3DSlideInRight 0.3s forwards;
}
&.current {
opacity: 1;
pointer-events: auto;
z-index: 1000;
}
}
}
}我这里只贴出重要部份的。 实在，贴出来基础没用，须要连系js来看。
js道理剖析
好吧，我继承贴哈。
js部份：
var slider = (function() {
var order = 0,
lis = $('.sliderCon li');
var toggle = (function() { //经由过程flag来举行切换
var current,
next,
isAnimated = false, //标识是不是正在实行动画
mark = 0, //用来示意多个动画是不是都完毕
len = lis.length - 1; //取得总的图片框
var changeState = function() {
mark++;
if (mark === 2) {
isAnimated = false;
mark = 0;
}
}
var nextExe = (function() {
var setCurrentAnimate = function() {
this.removeEventListener(transitionName, setCurrentAnimate);
this.classList.remove("current");
this.classList.remove("navOutNext");
changeState(); //检测是不是动画都实行完全
}
var setNextAnimate = function() {
this.removeEventListener(transitionName, setNextAnimate);
this.classList.add("current");
this.classList.remove('navInNext');
changeState();
}
return function() {
var current = lis[order];
order = order + 1 > len ? 0 : order + 1;
var next = lis[order]; //猎取下一个元素
if (!transitionName) {
alert("你浏览器怎样这么渣滓，赶忙换一个吧");
} else {
current.addEventListener(transitionName, setCurrentAnimate);
next.addEventListener(transitionName, setNextAnimate);
}
current.classList.add('navOutNext'); //最先实行动画
next.classList.add('navInNext');
}
})();
var preExe = (function(){
var setCurrentAnimate = function() {
this.removeEventListener(transitionName, setCurrentAnimate);
this.classList.remove("current");
this.classList.remove("navOutPre");
changeState(); //检测是不是动画都实行完全
}
var setPreAnimate = function(){
this.removeEventListener(transitionName, setPreAnimate);
this.classList.add("current");
this.classList.remove("navInPre");
changeState(); //检测是不是动画都实行完全
}
return function(){
var current = lis[order];
order = order-1<0 ? len: order-1;
var pre = lis[order]; //取得下一个切换的元素
if (!transitionName) {
alert("你浏览器怎样这么渣滓，赶忙换一个吧");
} else {
current.addEventListener(transitionName, setCurrentAnimate);
pre.addEventListener(transitionName, setPreAnimate);
}
current.classList.add('navOutPre'); //最先实行动画
pre.classList.add('navInPre');
}
})();
return function(flag) { //进口函数
if (isAnimated) return; //假如正在实行动画则退出
isAnimated = true; //标识正在实行动画
if (flag === "next") {
nextExe();
}else if(flag==="pre"){
preExe();
}
}
})();
setInterval(function() {
toggle("pre");
}, 1000);
})();因为我过分的运用了闭包和高阶函数，所以看起来会有点累哈。不急，一样，一个顺序我们先找进口函数。
能够看出。进口函数就是toggle(就是运用return 的那部份)；
return function(flag) { //进口函数
if (isAnimated) return; //假如正在实行动画则退出
isAnimated = true; //标识正在实行动画
if (flag === "next") {
nextExe();
}else if(flag==="pre"){
preExe();
}
}isAnimated只是个标识符，用来示意是不是正在实行动画。经由过程传入的flag来示意向前切换照样向后切换。假如向后接环则实行nextExe函数。好，我们来看一下nextExe函数。
切换动画函数
var nextExe = (function() {
var setCurrentAnimate = function() {
this.removeEventListener(transitionName, setCurrentAnimate);
this.classList.remove("current");
this.classList.remove("navOutNext");
changeState(); //检测是不是动画都实行完全
}
var setNextAnimate = function() {
this.removeEventListener(transitionName, setNextAnimate);
this.classList.add("current");
this.classList.remove('navInNext');
changeState();
}
return function() {
var current = lis[order];
order = order + 1 > len ? 0 : order + 1;
var next = lis[order]; //猎取下一个元素
if (!transitionName) {
alert("你浏览器怎样这么渣滓，赶忙换一个吧");
} else {
current.addEventListener(transitionName, setCurrentAnimate);
next.addEventListener(transitionName, setNextAnimate);
}
current.classList.add('navOutNext'); //最先实行动画
next.classList.add('navInNext');
}
})();对不起，吓到人人了，我这里又写了一个闭包。。。 固然，重要进口函数照样在return 背面。
order用来标识当前的元素的序号。 须要注重的是增加动画监听的那一部份。我这里运用了一个tricks(from moderniz)，我贴出来吧。
动画支撑检测
var transitionName = (function() {
var t;
var el = document.createElement('fakeelement');
//实在运用animated完全能够庖代transition
var transitions = {
//这里是aniamted事宜
'WebkitAnimation': 'webkitAnimationEnd',
'OAnimation': 'oAnimationEnd',
'msAnimation': 'MSAnimationEnd',
'animation': 'animationend'
//下面是transition事宜
// 'transition':'transitionend',
// 'OTransition':'oTransitionEnd',
// 'MozTransition':'transitionend',
// 'WebkitTransition':'webkitTransitionEnd',
// 'MsTransition':'msTransitionEnd'
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
})();实在这个IIFE重要的功用就是检测，你的浏览器究竟支撑哪个动画监听函数。 好，pass.
我们回到适才的主函数nextExe. 接着，我们给current和next增加监听，监听函数先放着。 接着我们给current和next增加动画(就是增加class). 就这样。然后他会触发监听函数。 这里就不过量引见了， 唯一须要说起的就是，须要在背面临监听举行解绑，防止反复绑定。
空话说完了。 直接看个实例吧。
slider实例
这应当算是最原始的轮播。 接着我们能够在上面加上一些我们想要的功用。这里我加上了一些比较经常运用的，比方，轮播标识符，摆布翻页。
因为比较简朴，我这里直接把实例贴出来。实在重要的干货就是最原始的轮播，其他的都是花花草草。
好了，大部份内容我也差不多引见完了。
说说轮播
上面基础上把简朴轮播的道理引见一遍，虽然说低版本的SB IE可能会不支撑。 但这个重要取决于你产物leader的范例，假如他要求是ie9+那末你运用这个应当题目不大，就是须要处置惩罚一下动画完毕事宜的支撑。假如甚者须要将ie8斟酌进来，那末，这个应当运用css的基础属性，而不能运用css3,或许直接运用js举行转变。照样那句话，站在你的角度去造一个unique轮子，就是最好的进修。
