时间戳

首页 > 解决方案 > 图像滑块无法正常工作

javascript - 图像滑块无法正常工作

问题描述

我希望我的 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";
        }

标签： javascripthtmlcssslideshow

解决方案

在您的 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";
        }

尚未测试代码，但应该可以让您大部分时间到达那里。

推荐阅读