Question

我希望我的javascript与id =“wrapper”和id =“wrapper2”分开工作，但它没有这样做.....我真的不知道下一步该做什么帮助...是我做错了什么，或者我必须为同一页面上的不同图像滑块制作不同的javascripts。或者此代码中的任何编辑都有帮助??

<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中，在你的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";
        }

没有测试过代码，但主要应该让你到那里。

图像滑块无法正常工作

1 个答案: