Слайдер изображений не работает должным образом - PullRequest
Новая
       4

Слайдер изображений не работает должным образом

0 голосов
/ 09 июня 2018

Я хочу, чтобы мой javascript работал отдельно как с id = "wrapper", так и с id = "wrapper2", но он этого не делает ..... Я действительно не знаю, что делать дальше, пожалуйста, помогите ... isя делаю что-то не так или мне приходится делать разные javascript-коды для разных слайдеров изображений на одной страницеили любое редактирование в этом коде поможет ?? 

<div id="wrapper">

            <div class="slides">
                <img src="slide1/1.jpeg" alt="image" width="100%" height="100%"/>
            </div>    
            <div class="slides">
                <img src="slide1/2.jpeg" alt="image" width="100%" height="100%"/>
            </div>
            <div class="slides">
                <img src="slide1/3.jpeg" alt="image" width="100%" height="100%"/>
            </div>

            <button class="btn" onclick="plusIndex(1)" id="btn1">&#10094</button>
            <button class="btn" onclick="plusIndex(-1)" id="btn2">&#10095</button>

    </div>
    <div id="wrapper2">

            <div class="slides">
                <img src="slide2/1.jpeg" alt="image" width="100%" height="100%"/>
            </div>    
            <div class="slides">
                <img src="slide2/2.jpeg" alt="image" width="100%" height="100%"/>
            </div>
            <div class="slides">
                <img src="slide2/3.jpeg" alt="image" width="100%" height="100%"/>
            </div>

            <button class="btn" onclick="plusIndex(1)" id="btn1">&#10094</button>
            <button class="btn" onclick="plusIndex(-1)" id="btn2">&#10095</button>

    </div>

здесь есть javascript 

var index = 1;

        function plusIndex(n){
            index = index + n;
            showImage(index);
        }


        showImage(index);

        function showImage(n){
            var i;
            var x = document.getElementsByClassName("slides");
            if(n > x.length){
                index = 1;
            }
            if(n <=0 ){
                index = x.length;
            }
            for(i=0; i<x.length;i++){
                x[i].style.display = "none";
            }
            x[index - 1].style.display = "block";
        }

1 Ответ

0 голосов
/ 09 июня 2018

В вашем html поместите имя класса оболочки в вызове plusIndex, таким образом: 

<button class="btn" onclick="plusIndex(1, 'wrapper')" id="btn1">&#10094</button>
<button class="btn" onclick="plusIndex(-1, 'wrapper')" id="btn2">&#10095</button>

и 

<button class="btn" onclick="plusIndex(1, 'wrapper2')" id="btn1">&#10094</button>
<button class="btn" onclick="plusIndex(-1, 'wrapper2')" id="btn2">&#10095</button>

Затем в js сохраните ассоциативный массив для индексаа не одно число, таким образом: 

var indexes = {'wrapper': 1, 'wrapper2': 1};

, тогда все остальное просто: 

function plusIndex(n, id){
            indexes[id] += n;
            showImage(indexes[id], id);
        }

        function showImage(n, id){
            var i;
            var el = document.getElementById(id);
            var x = el.querySelector('slides');
            if(n > x.length){
                indexes[id] = 1;
            }
            if(n <=0 ){
                indexes[id] = x.length;
            }
            for(i=0; i<x.length;i++){
                x[i].style.display = "none";
            }
            x[indexes[n] - 1].style.display = "block";
        }

Не проверял код, но в основном должен вас там найти.

...