бигборд

by avgustre

HTML

<div class="billbord">
                      <div class="bord-main">
                          <img src="http://demo.marcofolio.net/rotating_billboard/images/billboard.png" alt="">
                      </div>
                      <div class="bord-wrap">
                        <div class="bord-inner">
                            <div class="bordad">
                                <div id="bordad_1" class="bordad-inner bordad_1">
                                    <img class="slice_1" />
                                    <img class="slice_2" />
                                    <img class="slice_3" />
                                    <img class="slice_4" />
                                    <img class="slice_5" />
                                    <img class="slice_6" />
                                    <img class="slice_7" />
                                    <img class="slice_8" />
                                    <img class="slice_9" />
                                    <img class="slice_10" />
                                    <img class="slice_11" />
                                    <img class="slice_12" />
                                    <img class="slice_13" />
                                    <img class="slice_14" />
                                    <img class="slice_15" />
                                    <img class="slice_16" />
                                    <img class="slice_17" />
                                    <img class="slice_18" />
                                    <img class="slice_19" />
                                    <img class="slice_20" />
                                </div>
                                <div id="bordad_2" class="bordad-inner bordad_2">
                                    <img class="slice_1" />
                                    <img class="slice_2" />
                                    <img class="slice_3" />
                                    <img...

SCSS

.billbord {
  position: relative;
  height: 480px;
  margin-top: 5%;
}

.bord-main {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}

.bord-wrap {
  position: absolute;
  top: 30px;
  left: 38px;
  width: 87%;
  height: 55%;
}

.bord-inner {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
}

.bordad {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #333;
  img {
    width: 0;
    height: 100%;
    position: absolute;
  }
}

.slice_1 {left: 0%;}
.slice_2 {left: 5%;}
.slice_3 {left: 10%;}
.slice_4 {left: 15%;}
.slice_5 {left: 20%;}
.slice_6 {left: 25%;}
.slice_7 {left: 30%;}
.slice_8 {left: 35%;}
.slice_9 {left: 40%;}
.slice_10 {left: 45%;}
.slice_11 {left: 50%;}
.slice_12 {left: 55%;}
.slice_13 {left: 60%;}
.slice_14 {left: 65%;}
.slice_15 {left: 70%;}
.slice_16 {left: 75%;}
.slice_17 {left: 80%;}
.slice_18 {left: 85%;}
.slice_19 {left: 90%;}
.slice_20 {left: 95%;}

#bordad_1 img {
  background: red;
}
#bordad_2 img {
  background: green;
}
#bordad_3 img {
  background: blue;
}

JavaScript

// слайдер бигборда
    $('.bordad-inner > img').each(function(i,e){
        rotate($(this),400,1000,i);
    });
    function rotate(elem1,speed,timeout,i){
      elem1.animate({'marginLeft':'5%','width':'0px'},speed,function(){
        var other;
        if(elem1.parent().attr('id') == 'bordad_1')
          other = $('#bordad_2').children('img').eq(i);
        else if(elem1.parent().attr('id') == 'bordad_2')
          other = $('#bordad_3').children('img').eq(i);
        else
          other = $('#bordad_1').children('img').eq(i);
          other.animate({'marginLeft':'0px','width':'5%'},speed,function(){
          var f = function() { rotate(other,speed,timeout,i) };
          setTimeout(f,timeout);
        });
      });
    }