如何在光滑的滑块中隐藏和显示滑动箭头？

在这篇文章中，我们将创建一个光滑的滑块，稍后将向您展示如何显示/隐藏光滑滑块的按钮。
要创建一个光滑的滑块，只需声明许多具有相同类名的元素。

例子：

输出：

现在，只需在左右角添加两个按钮以使用 HTML 滑动图像并声明一个 onClick 方法来更改
使用 JavaScript 显示图像的索引。

例子：

    
        
            
            
            
            ❮
            ❯
        

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

  
    

输出：

JavaScript 代码说明：
第一次加载脚本时，slideIindex 将设置为 1（第一张图片），当用户单击任一按钮时，
slideIndex 将根据它增加或减少。并且图像将被显示。 Display = “none” 将隐藏图片和
display = "block" 将再次显示图片。

隐藏按钮：
对于隐藏按钮，您可以删除这两行：

" button onclick="plusDivs(-1)">❮ button"
" button onclick="plusDivs(1)">❯ button"

而不是使用 onClick 调用脚本，而是使用 setTimeout(function_name, time_in_ms)函数自动调用该函数
本身在设定的时间段内。

例子：

    
    
    
        .mySlides {
            display: none;
        }
    
  
    
        
            
            
            
        
  
        
            var slideIndex = 0;
            showDivs();
  
            function showDivs() {
                var i;
                var x = document.getElementsByClassName("mySlides");
                slideIndex++;
                if (slideIndex > x.length) {
                    slideIndex = 1;
                }
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                x[slideIndex - 1].style.display = "block";
                setTimeout(showDivs, 2000);
            }
        
    

输出：