Javascript CSS图库-如何更改1张照片_Javascript_Jquery_Html_Css

Javascript CSS图库-如何更改1张照片

javascript jquery html css

Javascript CSS图库-如何更改1张照片,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我用html/css制作了一个图库，点击箭头后一次滚动4张照片，我希望它滚动一张。我正在合并，我很好：）我希望每个元素是单独的，每个照片。只要让代码更简洁：）如果你们中有人能帮助我，我将非常感激你有什么想法吗？很抱歉，我在延迟时正确添加了代码，但我是第一次添加它：） $（“.gallery slider li”）。每个（函数（e）{ 如果（e！=0） $（this.hide（）； }); $（“#下一步”）。单击（函数（）{ if（$（“.gallery滑块li:可见”）.next（）

我用html/css制作了一个图库，点击箭头后一次滚动4张照片，我希望它滚动一张。我正在合并，我很好：）我希望每个元素是单独的，每个照片。只要让代码更简洁：）如果你们中有人能帮助我，我将非常感激

你有什么想法吗？很抱歉，我在延迟时正确添加了代码，但我是第一次添加它：）

$（“.gallery slider li”）。每个（函数（e）{
如果（e！=0）
$（this.hide（）；
});
$（“#下一步”）。单击（函数（）{
if（$（“.gallery滑块li:可见”）.next（）.length！=0）
$（“.gallery滑块li:可见”）.next（）.show（）.prev（）.hide（）；
否则{
$（“.gallery滑块li:可见”）.hide（）；
$（“.gallery:first”）.show（）；
}
返回false；
});
$（“#prev”）。单击（函数（）{
if（$（“.gallery滑块li:可见”）.prev（）.length！=0）
$（“.gallery滑块li:可见”）.prev（）.show（）.next（）.hide（）；
否则{
$（“.gallery滑块li:可见”）.hide（）；
$（“.gallery:last”）.show（）；
}
返回false；
});
.gal元素a，
.img_gal ul li a{
不透明度：0；
过渡：0.5s；
背景位置：中心；
线性梯度（到底部，rgba（255，0，0，0）0%，rgba（255，0，0）0%，rgba（255，0，0，0.0）0%）
}
.gal grid ul li:悬停a，
.gal元素：悬停a{
高度：310px；
}
.img_gal ul li:将鼠标悬停在a上{
身高：575px；
}
.gallery滑块li.gal元素{
位置：相对位置；
}
李先生，
李先生，
.gal元素{
过渡：0.5s；
}
.gal元素{
宽度：50%；
}
.nav_滑块_图库{
位置：绝对位置；
顶部：92px；
}
.galerry\u滑块\u网格{
保证金：0自动；
最大宽度：1030px；
填充：0；
文本对齐：居中；
}
.gallery滑块li.gal元素{
位置：相对位置；
}
.gal元素，
李先生，
李先生{
过渡：.5s；
}
.gal元素，
李高乐先生{
宽度：25%；
浮动：左；
高度：310px；
}
.专题图片a，
.gal元素a，
.gal grid ul li a，
.img_gal ul li a{
不透明度：0；
过渡：.5s；
背景位置：中心；
}
.nav_滑块_图库{
位置：绝对位置；
顶部：92px；
}
.nav_2{
光标：指针；
填充：18px 168px 18px 43px；
身高：100%；
边框：8px实心#ff103d；
左边框：0；
过渡：.3s；
}
.nav_2{
光标：指针；
填充：18px 168px 18px 43px；
身高：100%；
边框：8px实心#ff103d；
左边框：0；
过渡：.3s；
}
.nav_2_l:悬停{
边框：8px实心#fff；
右边界：0；
过渡：.3s；
}
.nav_2_l{
光标：指针；
填充：18px43px18px22px；
身高：100%；
边框：8px实心#ff103d；
右边界：0；
过渡：.3s；
左-16px；
}





您可以尝试类似的方法，因为这样一次只显示一个图像：
<html>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="img_snowtops.jpg" style="width:100%">
  <img class="mySlides" src="img_lights.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="img_forest.jpg" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

<script>
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";  
}
</script>

</body>
</html>


例子
手动幻灯片放映
❮
❯
var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i
谢谢，但这一行只显示一张图片，我需要4张图片，但当我进一步单击时，应该只更改一张图片，而不是四张