图像滑块无法正常工作

Question

我希望我的 javascript 与 id="wrapper" 和 id="wrapper2" 分开工作，但它并没有这样做......我真的不知道下一步该怎么做请帮忙...是我做错了什么，还是我必须为同一页面上的不同图像滑块制作不同的 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";
        }

Answer 1

在您的 html 中，将包装器的 class 名称放入您的 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";
        }

尚未测试代码，但应该可以帮助您完成大部分工作。

图像滑块无法正常工作

Image Slider is not working properly

html

javascript

css

slideshow