时间戳

首页 > 解决方案 > CSS 画廊 - 如何更改 1 张照片

javascript - CSS 画廊 - 如何更改 1 张照片

问题描述

我在 html / css 中创建了一个画廊，单击箭头后一次滚动 4 张照片，我希望它滚动一张。我正在组合，我很好:) 我希望每个元素都是分开的，每张照片。只是让代码更干净 :) 如果你们中的任何人帮助我，我将非常感激。

你有什么想法？很抱歉我延迟添加了正确的代码，但我是第一次添加它:)

$(".gallery-slider li").each(function(e) {
  if (e != 0)
    $(this).hide();
});

$("#next").click(function() {
  if ($(".gallery-slider li:visible").next().length != 0)
    $(".gallery-slider li:visible").next().show().prev().hide();
  else {
    $(".gallery-slider li:visible").hide();
    $(".gallery-slider li:first").show();
  }
  return false;
});

$("#prev").click(function() {
  if ($(".gallery-slider li:visible").prev().length != 0)
    $(".gallery-slider li:visible").prev().show().next().hide();
  else {
    $(".gallery-slider li:visible").hide();
    $(".gallery-slider li:last").show();

  }
  return false;
});
.gal-element a,
.img_gal ul li a {
  opacity: 0;
  transition: 0.5s;
  background-position: center center;
  linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0.0) 0%)
}

.gal-grid ul li:hover a,
.gal-element:hover a {
  height: 310px;
}

.img_gal ul li:hover a {
  height: 575px;
}

.gallery-slider li .gal-element {
  position: relative;
}

.gal-grid li,
.gallery-slider li,
.gal-element {
  transition: 0.5s;
}

.gal-element {
  width: 50%;
}

.nav_slider_gallery {
  position: absolute;
  top: 92px;
}

.galerry_slider_grid {
  margin: 0 auto;
  max-width: 1030px;
  padding: 0;
  text-align: center;
}

.gallery-slider li .gal-element {
  position: relative;
}

.gal-element,
.gal-grid li,
.gallery-slider li {
  transition: .5s;
}

.gal-element,
.gal-grid ul li {
  width: 25%;
  float: left;
  height: 310px;
}

.feature-image a,
.gal-element a,
.gal-grid ul li a,
.img_gal ul li a {
  opacity: 0;
  transition: .5s;
  background-position: center center;
}

.nav_slider_gallery {
  position: absolute;
  top: 92px;
}

.nav_2 {
  cursor: pointer;
  padding: 18px 168px 18px 43px;
  height: 100%;
  border: 8px solid #ff103d;
  border-left: 0;
  transition: .3s;
}

.nav_2 {
  cursor: pointer;
  padding: 18px 168px 18px 43px;
  height: 100%;
  border: 8px solid #ff103d;
  border-left: 0;
  transition: .3s;
}

.nav_2_l:hover {
  border: 8px solid #fff;
  border-right: 0;
  transition: .3s;
}

.nav_2_l {
  cursor: pointer;
  padding: 18px 43px 18px 22px;
  height: 100%;
  border: 8px solid #ff103d;
  border-right: 0;
  transition: .3s;
  left: -16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container  gallery-slider" style="background-color:#000000; min-height:500px;">
  <div class="container_inner">
    <div class="row_grid " style="">
      <a style="left:-14px;" class="nav_slider_gallery " id="prev">
        <div class="nav_2_l"><img alt="Tattoo Theme - FutureTeam" src="https://gdzietymrazem.pl/wp-content/uploads/2018/07/arr_l_v2.png"></div>
      </a>
      <ul class="galerry_slider_grid">
        <li>
          <div class="gal-element" style="background-image: url(https://gdzietymrazem.pl/wp-content/uploads/2018/07/gal1.jpg); background-size:cover"><a class="lightboxes" href="http://tf.pbhost.pl/img/gal1.jpg" rel=""><span class="plus_cover"></span></a></div>
          <div class="gal-element" style="background-image: url(https://gdzietymrazem.pl/wp-content/uploads/2018/07/gal2.jpg); background-size:cover"><a class="lightboxes" href="http://tf.pbhost.pl/img/gal2.jpg" rel=""><span class="plus_cover"></span></a></div>
          <div class="gal-element" style="background-image: url(https://gdzietymrazem.pl/wp-content/uploads/2018/07/gal3.jpg); background-size:cover"><a class="lightboxes" href="http://tf.pbhost.pl/img/gal3.jpg" rel=""><span class="plus_cover"></span></a></div>
          <div class="gal-element" style="background-image: url(https://gdzietymrazem.pl/wp-content/uploads/2018/07/gal4.jpg); background-size:cover"><a class="lightboxes" href="http://tf.pbhost.pl/img/gal4.jpg" rel=""><span class="plus_cover"></span></a></div>
        </li>
        <li>
          <div class="gal-element" style="background-image: url(https://gdzietymrazem.pl/wp-content/uploads/2018/07/gal4.jpg); background-size:cover"><a class="lightboxes" href="http://tf.pbhost.pl/img/gal4.jpg" rel=""><span class="plus_cover"></span></a></div>
          <div class="gal-element" style="background-image: url(https://gdzietymrazem.pl/wp-content/uploads/2018/07/gal3.jpg); background-size:cover"><a class="lightboxes" href="http://tf.pbhost.pl/img/gal3.jpg" rel=""><span class="plus_cover"></span></a></div>
          <div class="gal-element" style="background-image: url(https://gdzietymrazem.pl/wp-content/uploads/2018/07/gal2.jpg); background-size:cover"><a class="lightboxes" href="http://tf.pbhost.pl/img/gal2.jpg" rel=""><span class="plus_cover"></span></a></div>
          <div class="gal-element" style="background-image: url(https://gdzietymrazem.pl/wp-content/uploads/2018/07/gal1.jpg); background-size:cover"><a class="lightboxes" href="http://tf.pbhost.pl/img/gal1.jpg" rel=""><span class="plus_cover"></span></a></div>
        </li>
      </ul>
      <a class="nav_slider_gallery " id="next">
        <div class="nav_2"><img alt="Tattoo Theme - FutureTeam" src="https://gdzietymrazem.pl/wp-content/uploads/2018/07/arr_r_v2.png"></div>
      </a>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

标签： javascriptjqueryhtmlcss

解决方案

您可以尝试类似的方法，因为它一次显示一张图像：

<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>

推荐阅读