高度未定义的图像滑块

Question

我正在尝试创建一个图像滑块 (previous/next)，这样当我单击 "previous" 时图像会向左滑动，当我单击 "next" 时图像会向右滑动0.5 秒的慢度，所以需要一些动画。当我到达最后一张图片并单击 "next" 时，我希望图片 "run backwards" 到第一个，当我在第一个并单击 "previous" 时也是如此，所以它 "run forward"直到最后一个。

我想要相同的行为 this JSFiddle 显示。（但我不需要计时器自动移动图像，也不需要 "triggers" 按钮，只需要 "previous" 和 "next"）。

这里的问题是我的图像没有固定大小。我以百分比定义宽度，但不能定义高度，因为我有响应式设计，图像会随着我调整浏览器的大小而调整 window。

jQuery 到 previous/next 的操作非常简单，但是当我 remove/add "active" class 到我的图像（所以它们是否可见）。

我已经尝试并排放置所有图像并只显示第一个（设置容器宽度等于图像宽度），所以当我单击 "next" 我只是 "move" 容器左边所以它开始显示下一张图片，但它不起作用，因为一旦我无法定义图像的高度，它们就会出现在彼此下面，而不是并排。

JSFiddle

HTML

<div class="images">
    <img class="active" src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

<div class="previous">previous</div>

<div class="next">next</div>

CSS

img {
    width: 100px;  
    display: none;
    float: left;
}

img.active {
    display: block;
}

jQuery

$('.next').on('click', function() {
    var active = $('img.active');
    var next = active.next('img');

    if (next.length) {
        active.removeClass('active');
        next.addClass('active');
    } else {
        active.removeClass('active');
        $('.images img:first').addClass('active');
    }
});

Answer 1

也许这不是理想的情况，但至少它会给你一个想法。您可以使用 jQuery 的动画功能，我也稍微更改了您的代码。参见 demo here

在你的 HTML 我会这样说：

<div id="images">
    <div class="images-wrapper">
        <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/In-the-spotlight.jpg">
        <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/Bath-time-with-ducky.jpg">
        <img src="http://www.cutestpaw.com/wp-content/uploads/2016/03/FB_IMG_1452981788903.jpg">
        <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" />
    </div>      
</div>

<div class="previous">
  previous
</div>

<div class="next">
  next
</div>

并且在您的 jQuery 代码中您可以设置宽度动画：

$('.images-wrapper img:gt(0)').hide();

$('.next').click(function() {
    $('.images-wrapper img:first-child').animate({width:'toggle'},350).next().fadeIn().end().appendTo('.images-wrapper');
});

$('.previous').click(function() {
    $('.images-wrapper img:first-child').animate({width:'toggle'},350);
    $('.images-wrapper img:last-child').prependTo('.images-wrapper').fadeOut();
    $('.images-wrapper img:first-child').fadeIn();
});

通过此实现，将 active class 更改和添加到图像的整个过程被删除并替换为动画功能

Answer 2

我已经使用 css3 动画实现了。但是，每次添加或删除幻灯片时，这都需要在 css 中操作动画值。

@keyframes slideAnim {
  0% {
    transform: translateX(0)
  }
  12.5% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-25%);
  }
  37.5% {
    transform: translateX(-25%)
  }
  50% {
    transform: translateX(-50%)
  }
  62.5% {
    transform: translateX(-50%)
  }
  75% {
    transform: translateX(00%);
  }
  89.5% {
    transform: translateX(00%)
  }
  100% {
    transform: translateX(00%)
  }
}

这里设置了动画值，以便在幻灯片转换之间有一个暂停。我添加了一个父框架以一次只显示一张幻灯片。

请参考这个fiddle。

Answer 3

嗯，问题是滑动的高度。

首先，您需要有一个 "picture frame" 元素，它包含所有其他图像。这很重要。为了更好的想象一张图：

现在你有几种显示和隐藏图像的技巧了。一种可能是设置不透明度。使用时transition: opacity .15s ease-in-out;上一张淡出下一张淡入

对于幻灯片效果，是将可见图像的位置向左移动到其宽度，将之前纯新图像的宽度向右移动，然后变为0。因此，将当前图片向左移动框架出来了，新的就出来了。

如果高度不一样，这就是难点。如果当前图片高300px，新图片高400px，那么当新图片开始显示时，这里的图片框会立即调整他的高度。

下面的内容会随着每张幻灯片跳转。

这么想要吗？？？

如果是，我可以举例说明它是如何工作的。

Answer 4

您实际上可以在 Pure CSS!

中执行此操作

您使用 ID 和标签（具有 for 属性=作为目标 ID）

基本上就是这样。您所要做的就是设计它！（从 Joshua Hibbert 的 Pen 分叉）

body {
  background: #f7f4e2;
}

/* Slides */
.slider input {
  display: none;
}

/* Buttons */
.slider label {
  display: none;
  cursor: pointer;
  position: absolute;
  top: 6em;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: #000;
  padding: 1.36em .5em;
  opacity: .6;
  font-size: 19px;
  font-family: fantasy;
  font-weight: bold;
  transition: .25s;
}
.slider label:hover {
  opacity: 1;
}
.previous {
  margin-left: -188px;
}
.next {
  margin-left: 188px;
}

#slide1:checked ~ .buttons .slide1 {
  display: block;
}
#slide2:checked ~ .buttons .slide2 {
  display: block;
}
#slide3:checked ~ .buttons .slide3 {
  display: block;
}
#slide4:checked ~ .buttons .slide4 {
  display: block;
}

/* Images */
.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 300px;
  margin-top: -150px;
  margin-left: -200px;
  white-space: nowrap;
  padding: 0;
  float: left;
  transition: .25s;
  overflow: hidden;
  box-shadow: 0 0 0 3.12px #e8e8e8,
              0 0 0 12.64px #eaebe4,
              0 0 0 27.12px #000,
              0 24px 3.824em 5.12px #000;
}
.slide {
  width: 500em;
  transition: .25s;
}
.slider img {
  float: left;
  width: 400px;
  height: 300px;
}

#slide1:checked ~ .slide {
  margin: 0;
}
#slide2:checked ~ .slide {
  margin: 0 0 0 -400px;
}
#slide3:checked ~ .slide {
  margin: 0 0 0 -800px;
}
#slide4:checked ~ .slide {
  margin: 0 0 0 -1200px;
}

<div class="slider">
    <input type="radio" name="slide" id="slide1" checked="true" />
    <input type="radio" name="slide" id="slide2" />
    <input type="radio" name="slide" id="slide3" />
    <input type="radio" name="slide" id="slide4" />
  
  <div class="buttons">
    <!-- Slide 1 -->
    <label for="slide4" class="slide1 previous">&lt;</label>
    <label for="slide2" class="slide1 next">&gt;</label>
    
    <!-- Slide 2 -->
    <label for="slide1" class="slide2 previous">&lt;</label>
    <label for="slide3" class="slide2 next">&gt;</label>
    
    <!-- Slide 3 -->
    <label for="slide2" class="slide3 previous">&lt;</label>
    <label for="slide4" class="slide3 next">&gt;</label>
    
    <!-- Slide 4 -->
    <label for="slide3" class="slide4 previous">&lt;</label>
    <label for="slide1" class="slide4 next">&gt;</label>
  </div>

  <div class="slide">
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/872485/coldchase.jpg">
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/980517/icehut_sm.jpg">
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/943660/hq_sm.jpg">
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/599584/home.jpg">
  </div>
</div>

虽然这种方法是最兼容的（旧版本的 IE 除外）并且取决于你如何动画它可能比 JS 方法更耗时，但也可以更快，它只是取决于如何你想让动画播放，或者你可以使用 css library that does this for you.

这是我推荐的一些 css 图片滑块。

10 Amazing Pure CSS3 Image Sliders
http://bashooka.com/coding/pure-css3-image-sliders/

Pure CSS Image Slider Without Javascript #Codeconvey 是一个很好的解决方案，但很多 CSS
http://codeconvey.com/pure-css-image-slider/

这些以及你正在做的事情的缺点是你无法触摸滑动 phone 或平板电脑，这在如今的照片画廊中更为常见。

我建议去看看 Fotorama 太棒了！ :)

Answer 5

最简单的解决方案（我认为）是通过将它们放在 div 中来强制这些项目具有相同的大小。您甚至可以让 div 在不使用 img 标签的情况下显示图像，方法是使用 background-image CSS 功能（有关详细信息，请参阅 http://www.w3schools.com/css/css3_backgrounds.asp） .

项目 CSS 可能如下所示：

.item {
    background-size: contain;
    background-position: center;
}

并且在 HTML 中的每个项目中：

<div class='item' style='background-image: url(img1.jpg)' />
<div class='item' style='background-image: url(img2.jpg)' />
<div class='item' style='background-image: url(img3.jpg)' />

Answer 6

我终于到了。

HERE是我开发的解决方案fiddle。

实现此图片滑块的主要问题是图片虽然大小相同，但具有动态宽度（在 CSS 上的 % 中定义）和动态高度（未定义CSS).

解决方案基本上是在我的容器中放置一个 "fake" 图像（带有 opacity: 0），以便容器获得我将在滑块中使用的图像的实际大小；用position: absolute将div放到"hold"真实图像中，并给它一个由number of images * 100%计算的宽度；最后，根据图像数量，为我的滑块中的每个图像指定 x% 的宽度。

在 jQuery 中，我 "move" "images holder div" 总是按 %，从不按静态值，一旦我调整 [= 的大小，所有内容的宽度都会改变=38=].

如果您开始向左和向右滑动图像，然后调整 window 的大小，您会发现它继续完美地工作。

高度未定义的图像滑块

Slider of images with undefined height

html

javascript

css

jquery

slide