滑块未显示所有图像
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 < 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">❮</button>
<button class="btn" onclick="plusIndex(1)" id="btn2">❯</button>
</div>
【讨论】:
以上是关于滑块未显示所有图像的主要内容,如果未能解决你的问题,请参考以下文章
Slick.js:滑动滑块未正确拖动(快速回到第一张幻灯片)
slider.goToNextSlide() 滑块未定义 bxSlider