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

virgoprima,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slider</title>
   <style type="text/css">html{font-size:10px}
   body{padding:10px}
   .slider{position:relative;width:1000px;height:550px;background:#aed;padding-top:50px}
   .img{width:800px;overflow:hidden;margin:auto;background:#F00}
   .slider img{width:640px;height:480px;display:block;opacity:0.6}
   .img ul{height:480px;width:9999px;list-style:none;transition:left 500ms;font-size:0;position:relative}
   .img li{display:inline-block;margin-right:40px}
   .arrow{position:absolute;top:500px;padding:0;background:#ddd;border-radius:15px;border:1px solid gray;font-size:24px;line-height:24px;color:#444;display:block}
   .arrow:focus{outline:none}
   .arrow:hover{background:#ccc;cursor:pointer}
   .prev{left:25px}
   .next{right:25px}
   .img ul{transition:all 1s ease-in-out}
   </style>
</head>
<body>


    <div id="slider" class="slider">
        <button class="arrow prev">⇦</button>

            <div class="img">
            <ul>
                <li id="img1"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-4.jpg" alt="природа"></li>
                <li id="img2"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-5.jpg" alt="природа"></li>
                <li id="img3"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-7.jpg" alt="природа"></li>
                <li id="img4"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-8.jpg" alt="природа"></li>
                <li id="img5"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-3.jpg" alt="природа"></li>


            </ul>
        </div>

       <button class="arrow next">⇨</button>
    </div>



<script>
var slider = document.getElementById("slider");
var list = slider.querySelector("ul");
var listElems = slider.querySelectorAll("li");
var position = 0;

function move(position) {
    var sum = 0;
    for (var i = 0; i < position; i++) sum += i ? 680 : 640;
    list.style.marginLeft = -sum + "px"
}
slider.querySelector(".prev").onclick = function() {
    position = ++position % listElems.length;
    move(position)
};
slider.querySelector(".next").onclick = function() {
    --position;
    position < 0 && (position = listElems.length - 1);
    move(position)
};
</script>
</body>
</html>
Ответить с цитированием