Показать сообщение отдельно
  #5 (permalink)  
Старый 20.09.2018, 20:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

бесконечная карусель js
oleg901,
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
        <style>



/* sleider3---------------------------------- */

#slide3{
width:400px;
height:400px;
margin:auto;
 position: relative;

}


#img1{
    margin:auto;
    background-color:#7E6497;
    width:400px;
    height:400px;
    position:absolute;

}

#img2{
    margin:auto;
    background-color:#D0FF00;
    width:400px;
    height:400px;
    position:absolute;

}

#img3{
    margin:auto;
    background-color:#00C8FF;
    width:400px;
    height:400px;
    position:absolute;


}


#img4{
    margin:auto;
    background-color:red;
    width:400px;
    height:400px;
    position:absolute;
}



.of{
    font-size: 70px;
    line-height: 400px;
    text-align: center;
     opacity: 0;
     z-index: 0;
     transform: scale(0);
     transition: 1.5s;
}
.active{
    transition: 1s;
    opacity: 1;
    z-index: 100;
    transform: scale(1);
}

  </style>

    </head>
    <body>

 		<div id='an3'><header id="slide3">
 			<div id=slider>
 				<div id="img1" class="of">1</div>
                <div id="img2" class="of">2</div>
                <div id="img3" class="of">3</div>
                <div id="img4" class="of">4</div>
 			</div>

 			<div id="levo1"></div>
 			<div id="pravo1"></div>
 		</header></div>



     <script>
 document.addEventListener('DOMContentLoaded', function() {
      var Img = document.querySelectorAll(".of"),
        ImgLength = Img.length,
        ImgIndex = ImgLength - 1,
        pause = 5000;
        function show() {
        Img[ImgIndex].classList.remove("active");
        ImgIndex++;
        ImgIndex %= ImgLength;
        Img[ImgIndex].classList.add("active");
        window.setTimeout(show, pause);
        };
        show()
  });
    </script>
    </body>
</html>
Ответить с цитированием