滑块未显示所有图像

Posted

技术标签:

【中文标题】滑块未显示所有图像【英文标题】:Slider Not Showing All Images 【发布时间】:2018-06-03 13:59:24 【问题描述】:

我不知道为什么我的滑块按钮不起作用并且它们也没有显示所有图像....bruhhhhhhhh 有人请帮忙

                            <div class="slides">
 <img src="../page_images/1.jpeg"  />
                            </div>    
                            <div class="slides">
 <img src="../page_images/2.jpeg"  />
                            </div>
                            <div class="slides">
 <img src="../page_images/3.jpeg"  />
                            </div>
                     <div class="slides">
  <img src="../page_images/4.jpeg"  />
                                </div>

❮ ❯

还有java脚本

        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 < x.length)
                index = x.length;
            
            for(i=0; i<x.length;i++)
                x[i].style.display = "none";
            
            x[index-1].style.display = "block";
        

【问题讨论】:

【参考方案1】:

这是解决方案 -

你只需要改变n &lt; x.length条件

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";
<div class="marbletypeleft">




  <div class="slides">
    <img src="../page_images/1.jpeg"    />
  </div>
  <div class="slides">
    <img src="../page_images/2.jpeg"    />
  </div>
  <div class="slides">
    <img src="../page_images/3.jpeg"    />
  </div>
  <div class="slides">
    <img src="../page_images/4.jpeg"    />
  </div>

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

【讨论】:

以上是关于滑块未显示所有图像的主要内容,如果未能解决你的问题,请参考以下文章

引导滑块未在 iphone 6、移动设备上显示工具提示

jQuery-UI滑块未显示

Slick.js:滑动滑块未正确拖动(快速回到第一张幻灯片)

slider.goToNextSlide() 滑块未定义 bxSlider

Material-UI 滑块未将名称道具暴露给 Formik

图像滑块:保持所有图像的高度相同,同时保持滑块响应