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

Простейший слайдер делегирование точечная навигация
Rezorwar,
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style type='text/css'>
    * {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
#container {
    position: relative;
    top: 20px;
    width: 640px;
    height: 480px;
    margin: 0 auto;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, .5);
    transition: all .6s;
    background-repeat:  no-repeat;
    background-size: cover;
    background-position: center;
}
#previous {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -20px;
    opacity: .5;
    cursor: pointer;
}
#previous:hover, #next:hover {
    opacity: 1;
}
#previous:active {
    margin-top: -18px;
}
#next:active {
    margin-top: -18px;
}
#next {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -20px;
    opacity: .3;
    cursor: pointer;
}
.nav {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100px;
    margin-left: -50px;
}
.nav li {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    display: block;
    height: 10px;
    width: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
}

.active {
    background-color: red;
}
.up{
    display: flex;
    margin: 4px auto;
    text-align: center;
    justify-content: center;
    background-color: #D3D3D3;
    width: 300px;
    border-radius: 8px;
}
.up li{
   margin: 2px 5px;
   cursor: pointer;
   font-size: 1.1em;
   text-transform: capitalize;
  }
.up li.active{
    color: #FFFFFF;
    border-bottom: solid 1px #FFFFFF;
    background-color: transparent;
}
</style>



<script>
document.addEventListener('DOMContentLoaded', function() {
    (function() {
        var container = document.getElementById("container"),
            button = document.getElementById("next"),
            previous = document.getElementById("previous"),
            array = ["http://mebelperemen.ru/image/data/praga%20moduli/2017-07-01_203711.jpg",
            "https://remont-otdelka62.ru/wp-content/uploads/2014/06/otdelka_komnat_foto3.jpg",
            "http://grazia-mebel.ru/upload/iblock/e9c/e9c73472cfcd3f3c6ffc4478bd07b546.jpg",
            "https://domtexnik.com.ua/assets/uploads/store/products/80d7c-polotencesushitel-mario-dzhuno-01.jpg"],
            text = ["кухня","комната","прихожая","туалет"],
            navUp = document.querySelector(".up"),
            sliderRulesUp = document.querySelectorAll(".up li"),
            sliderRules = document.querySelectorAll(".nav li"),
            old, i = 0,
            j = sliderRules.length - 1,
            imgSet = function(link) {
                container.style.backgroundImage = "url(" + link + ")"
            };
        container.addEventListener("click", newX, false);
        navUp.addEventListener("click", newX, false);

        for (; j > -1; j--) {
            var link = array[j];
            var img = new Image;
                img.src = link;
            var sliderRule = sliderRules[j];
            sliderRule.dataset.indx = j;
            var sliderRuleUp =
                sliderRulesUp[j];
            sliderRuleUp.textContent = text[j];
            sliderRuleUp.dataset.indx = j
        }
        sliderRule.classList.add("active");
        sliderRuleUp.classList.add("active");
        sliderRule.click();

        function newX(e) {
            var elem = e.target;
            var i = +elem.dataset.indx;
            if (isNaN(i)) return;
            var next = i + 1;
            next == array.length && (next = 0);
            var prev = i - 1;
            0 > prev && (prev = array.length - 1);
            button.dataset.indx = next;
            previous.dataset.indx = prev;
            document.querySelector(".nav .active").classList.remove("active");
            sliderRules[i].classList.add("active");
            document.querySelector(".up .active").classList.remove("active");
            sliderRulesUp[i].classList.add("active");
            var link = array[i];
            imgSet(link);
            e.preventDefault()
        }
    })()
});
</script>


</head>
<body>
        <ul class="up">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
  	<div id="container">
        <img src="https://www.gentec-eo.com/Content/images/home/slider/left-arrow.png" id="previous" width="40" height="40" >
        <img src="https://www.gentec-eo.com/Content/images/home/slider/right-arrow.png" id="next" width="40" height="40" >
        <ul class="nav">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</body>
</html>
Ответить с цитированием