全屏的幻灯片,多种切换效果

转载 (原文地址) 爱范儿 随笔 jquery 947阅读 2014-08-21 13:48:41 举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
*{margin:0;padding:0;list-style:none;}
html, body, .demo {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.content{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}

.list{position:absolute;width:100%;height:100%;}
.list img{
width:200%;
position:absolute;
}
.item-bg{position:absolute;width:50%;height:50%;overflow:hidden;}
.list.current .item-bg,.list.current1 .item-bg,.list.current2 .item-bg{
-webkit-transition:-webkit-transform 0.9s cubic-bezier(0.7,0,0.3,1),background-size 0.9s cubic-bezier(0.7,0,0.3,1);
-moz-transition:-moz-transform 0.9s cubic-bezier(0.7,0,0.3,1),background-size 0.9s cubic-bezier(0.7,0,0.3,1);
-ms-transition:-ms-transform 0.9s cubic-bezier(0.7,0,0.3,1),background-size 0.9s cubic-bezier(0.7,0,0.3,1);
transition:transform 0.9s cubic-bezier(0.7,0,0.3,1),background-size 0.9s cubic-bezier(0.7,0,0.3,1);
}

.item-bg:nth-child(1){
background-repeat:no-repeat;
background-position:left top;
background-size:200% 200%;
}
.item-bg:nth-child(2){
background-position:100% top;
background-size:200% 200%;
left:50%;
top:0;
}
.item-bg:nth-child(3){
background-position:left 100%;
background-size:200% 200%;
left:0;
top:50%;
}
.item-bg:nth-child(4){
background-position:100% 100%;
background-size:200% 200%;
left:50%;
top:50%;
}

.item-bg:nth-child(2) img{
left:-100%;
}

.item-bg:nth-child(3) img{
top:-100%;
}

.item-bg:nth-child(4) img{
top:-100%;
left:-100%;
}

@-webkit-keyframes scaleanimate{
0%{-webkit-transform:scale(1.2);}
100%{-webkit-transform:scale(1);}
}
@-moz-keyframes scaleanimate{
0%{-moz-transform:scale(1.2);}
100%{-moz-transform:scale(1);}
}
@-ms-keyframes scaleanimate{
0%{-ms-transform:scale(1.2);}
100%{-ms-transform:scale(1);}
}

.list.active{
z-index:1;
-webkit-animation:scaleanimate ease 1s;
-moz-animation:scaleanimate ease 1s;
-ms-animation:scaleanimate ease 1s;
animation:scaleanimate ease 1s;
}
.list.current,.list.current1,.list.current2{
z-index:2;
}
.list.now{
z-index:3;
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
transform:none;
}

.list.current .item-bg:nth-child(1){
-webkit-transform:translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translate3d(-100%, 0, 0);
}
.list.current .item-bg:nth-child(2){
-webkit-transition-delay:0.15s;
-moz-transition-delay:0.15s;
-ms-transition-delay:0.15s;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.list.current .item-bg:nth-child(3){
-webkit-transition-delay:0.3s;
-moz-transition-delay:0.3s;
-ms-transition-delay:0.3s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.list.current .item-bg:nth-child(4){
-webkit-transition-delay:0.45s;
-moz-transition-delay:0.45s;
-ms-transition-delay:0.45s;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}

.list.current1 .item-bg:nth-child(1){
-webkit-transform: translate(-100%, -100%);
-moz-transform: translate(-100%, -100%);
-ms-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
}
.list.current1 .item-bg:nth-child(2){
-webkit-transform: translate(100%, -100%);
-moz-transform: translate(100%, -100%);
-ms-transform: translate(100%, -100%);
transform: translate(100%, -100%);
}
.list.current1 .item-bg:nth-child(3){
-webkit-transform: translate(-100%, 100%);
-moz-transform: translate(-100%, 100%);
-ms-transform: translate(-100%, 100%);
transform: translate(-100%, 100%);
}
.list.current1 .item-bg:nth-child(4){
-webkit-transform: translate(100%, 100%);
-moz-transform: translate(100%, 100%);
-ms-transform: translate(100%, 100%);
transform: translate(100%, 100%);
}

.list.current2 .item-bg:nth-child(1){
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.list.current2 .item-bg:nth-child(2){
-webkit-transform: translateY(-100%);
-moz-transform: translateY( -100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition-delay:0.15s;
-moz-transition-delay:0.15s;
-ms-transition-delay:0.15s;
transition-delay:0.15s;
}
.list.current2 .item-bg:nth-child(3){
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition-delay:0.30s;
-moz-transition-delay:0.30s;
-ms-transition-delay:0.30s;
transition-delay:0.30s;
}
.list.current2 .item-bg:nth-child(4){
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition-delay:0.45s;
-moz-transition-delay:0.45s;
-ms-transition-delay:0.45s;
transition-delay:0.45s;
}

.page{position:absolute;left:0;top:0;z-index:10;width:200px;height:30px;}

.prev,.next{
display:block;
position:absolute;
height:100px;
width:50px;
color:#fff;
opacity:0.5;
top:50%;
margin-top:-50px;
z-index:1000;
background-color:#000;
text-decoration:none;
line-height:100px;
text-align:center;
font-size:90px;
-webkit-transition:all ease-in 0.2s;
-moz-transition:all ease-in 0.2s;
-ms-transition:all ease-in 0.2s;
transition:all ease-in 0.2s;
}
.next{right:0;}
.prev{left:0;}
.prev:hover,.next:hover{
font-size:80px;
}

.prev.active,.next.active{
background-color:red;
}

.load{position:absolute;z-index:1000;width:100%;line-height:500px;text-align:center;height:100%;background:rgba(0,0,0,0.5);color:#fff;font-size:50px;}

</style>
</head>

<body>

<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
<div class="load"></div>
<div class="demo">

 <div class="content">

         <div class="list active">
              <div class="item-bg"></div>
              <div class="item-bg"></div>
              <div class="item-bg"></div>
              <div class="item-bg"></div>
         </div>

         <div class="list">
               <div class="item-bg"></div>
               <div class="item-bg"></div>
               <div class="item-bg"></div>
               <div class="item-bg"></div>
         </div>

          <div class="list">
              <div class="item-bg"></div>
              <div class="item-bg"></div>
              <div class="item-bg"></div>
              <div class="item-bg"></div>
          </div>

          <div class="list">
               <div class="item-bg"></div>
               <div class="item-bg"></div>
               <div class="item-bg"></div>
               <div class="item-bg"></div>
         </div>

         <div class="list">
              <div class="item-bg"></div>
              <div class="item-bg"></div>
              <div class="item-bg"></div>
              <div class="item-bg"></div>
         </div>

    </div>

</div>

<script>

var now = 0,
current = 0,
mark = true,
list = document.querySelectorAll('.list'),
oLoad = document.querySelectorAll('.load')[0],
next = document.querySelectorAll('.next')[0],
prev = document.querySelectorAll('.prev')[0],
itemBg = document.querySelectorAll('.item-bg'),
iLoad = 0;

for(var i=0,j=list.length;i<j;i++){
(function(i){
var newImg = new Image();
newImg.onload = function(){
iLoad++;
oLoad.innerHTML = Math.ceil(100*iLoad/list.length)+"%";
if(iLoad == list.length){
oLoad.style.display = "none";
fLoad();
}
}
newImg.src = "http://lllypm.com/demo/img/"+(i+1)+"a.jpg";;
})(i)
}

function fLoad(){
var setBg = function(n){
for(var i = 0,j = this.children.length;i<j;i++){
this.children[i].style.cssText = "background-image:url(http://lllypm.com/demo/img/"+(n+1)+"a.jpg)";;
}
}

      for(var i=0,j = list.length;i<j;i++){
             setBg.call(list[i],i)
       }

        var easing = ['current','current1','current2'];

       next.addEventListener('click',function(){

                if(!mark)return;
                 mark = false;

                 current = now;
                 now++;
                if(now == list.length){
                      now = 0;
                  }
                 animate();

       },false);

prev.addEventListener('click',function(){

         if(!mark)return;
            mark = false;

            current = now;
            now--;
            if(now == -1){
                  now = list.length - 1;
             }

              animate();

  },false);

function ran(n,m){
return parseInt(Math.random()*m+n);
}

function animate(type){

    var len = list.length;
     var str_class = easing[ran(0,3)];
     list[current].classList.add(str_class);
     list[now].classList.add('active');

     prev.classList.add('active');
     next.classList.add('active');

 setTimeout(function(){
    while(len--){
          list[len].className = "list";
    }

    list[now].classList.add('now');

     prev.classList.remove('active');
     next.classList.remove('active');
      mark = true;
   },1500)

}
}
</script>
</body>
</html>代码片段 1

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复