Javascript-форум - Показать сообщение отдельно

рони · #2 (**permalink**) 25.12.2017, 04:06

shahin,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div.carusel ul li img{
    width:200px;
    height:340px;
  }

  div.carusel ul li div{
    position:absolute;
    bottom:0;
    margin-left:120%;
    text-align:center;
    transition:margin-left .5s ease-in-out .3s;
    background-color:transparent;
    color:#000000;
  }

  div.carusel ul li.act div{
    margin-left:45%;
  }

  div.carusel ul li.hide div{
    margin-left:-120%;
    transition-delay:margin-left 0s;
    transition-duration:margin-left .3s;
  }

  div.carusel ul li{
    position:relative;
    margin:0px;
    width:200px;
    height:350px;
    float:left;
    display:block;
    text-align:center;
  }

  div.carusel ul{
    position:relative;
    top:0px;
    left:0px;
    display:block;
    width:1500px;
    height:350px;
    padding:0px;
    margin:0px;
  }

  div.carusel{
    overflow:hidden;
    width:200px;
    height:350px;
    position:relative;
    margin:10px auto;
    border: 2px solid #8B4513;
    border-radius: 12px;
  }

  .content{
    position:relative;
  }

  .content div p{
    opacity:0;
    background-color:#8B4513;
    color:#FFFFFF;
    margin-left:0%;
    transition:opacity .8s;
    width:100%;
  }

  .content div:nth-child(1) p{
    background-color:red;
  }

  .content div:nth-child(2) p{
    background-color:green;
  }

  .content div:nth-child(3) p{
    background-color:Yellow;
  }

  .content div:nth-child(4) p{
    background-color:DeepPink;
  }

  .content div:nth-child(5) p{
    background-color:MediumBlue;
  }

  .content div.act p{
    opacity:1;
    transition:opacity .8s;
  }

  .content div.hide p{
    transition:margin-left .6s ease-out;
    margin-left:-120%;
  }

  .content div p:nth-child(1){
    transition-delay:.1s;
  }

  .content div p:nth-child(2){
    transition-delay:.3s;
  }

  .content div p:nth-child(3){
    transition-delay:.5s;
  }

  .content div p:nth-child(4){
    transition-delay:.7s;
  }

  .content div p:nth-child(5){
    transition-delay:.9s;
  }

  .content div{
    width:100%;
    position:absolute;
    z-index:10;
    overflow:hidden;
  }

  .content div.act{
    z-index:10;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  function c() {
    var b = $("li:first", a), e = b.width(), g = f.index(b), d = $(".content > div").eq(g);
    b.addClass("act");
    d.removeClass("hide").addClass("act");
    a.delay(4500).queue(function(a) {
      b.addClass("hide");
      d.addClass("hide");
      a();
    }).delay(500).animate({left:-e}, 1200, function() {
      d.removeClass("act");
      b.appendTo(a).removeClass("act hide");
      a.css({left:"0px"});
      c();
    });
  }
  var a = $(".carusel ul"), f = $("li", a);
  c();
});
  </script>
</head>

<body>
<div class="carusel">
        <ul>
            <li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>1</div></li>
            <li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>2</div></li>
            <li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>3</div></li>
            <li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>4</div></li>
            <li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>5</div></li>
        </ul>
</div>
<div class="content">
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>

</div>

</body>
</html>