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

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



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

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


}


#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;
    display:  none;
}


  </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 src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
     <script>
$(function() {
    var Img = $(".of"),
        ImgLength = Img.length,
        ImgIndex = 0,
        pause = 5000,
        duration = 1500;
    Img.eq(ImgIndex).fadeIn(duration, show);

    function show() {
        Img.delay(pause).eq(ImgIndex).fadeOut(duration, show);
        ImgIndex++;
        ImgIndex %= ImgLength;
        Img.eq(ImgIndex).fadeIn(duration)
    }
});
     </script>
    </body>
</html>
Ответить с цитированием