未定义高度的图像滑块

Question

我正在尝试创建一个图像滑块(上一个/下一个),这样当我点击"上一个"时图像向左滑动,当我点击"下一个"时,图像向下滑动0.5s的慢速,所以它需要一些动画.当我到达最后一张图片然后点击"下一张"时,我希望图像"向后"运行到第一张图像,当我在第一张图像时点击"上一张",所以它"向前跑"直到最后一个.

我想要JSFiddle显示的相同行为.(但我不需要计时器自动移动图像,也不需要"触发"按钮,只需"上一步"和"下一步").

这里的问题是我的图像没有固定的大小.我以百分比定义宽度并且无法定义高度因为我有响应式设计,所以在调整浏览器窗口大小时图像会调整大小.

jQuery到上一个/下一个动作非常简单,但当我删除/添加"活动"类到我的图像时,我找不到添加此动画的方法(因此它们变得可见或不可见).

我已经尝试并排显示所有图像并仅显示第一个(设置容器宽度等于图像宽度),所以当我点击"下一步"时,我只是将容器"移动"到左边,所以它开始显示下一个图像,但它不起作用,因为一旦我无法定义图像的高度,它们将出现在彼此之下,而不是并排.

的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

那么问题是滑动的高度.

首先,你需要一个元素,它是"图片框架",可以容纳所有其他图像.这很重要.想要获得更好的想象力:

现在,您有几种技术可以显示和隐藏图像.一个可能是设置不透明度.当使用时transition: opacity .15s ease-in-out;,一个图像正在淡出,下一个图像正在淡入.

对于幻灯片放映效果,可见图像的位置向左到左边的宽度,以及之前纯粹是新的图像到右边的图像然后是0.因此,将当前图像移到框架的左边,新的出现了.

如果高度不同,这就是困难.如果当前图像高300px和新的400px,那么一旦新图像开始可见,这里的图像帧就会立即调整其高度.

每张幻灯片下面的内容都会开始跳转.

这是如此渴望???

如果是的话,我可以举例说明它是如何运作的.

Answer 2

你可以在Pure CSS中实现这一点!

您使用ID和标签(for目标ID 的属性=)

基本上就是这样.你剩下的就是设计它!(从约书亚希伯特的钢笔分叉)

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

这是我推荐的一些css图像滑块.

10个惊人的纯CSS3图像滑块
http://bashooka.com/coding/pure-css3-image-sliders/

没有Javascript的纯CSS图像滑块#Codeconvey是您正在寻找的一个很好的解决方案,但很多CSS
http://codeconvey.com/pure-css-image-slider/

这些以及你正在做的事情的缺点是,你无法触摸手机或平板电脑上的滑动,现在这些照片画廊现在更常见.

我建议看看Fotorama真是太神奇了!:)

Answer 3

我终于到了那里。

这是我开发的解决方案的摆弄。

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

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

在 jQuery 中，%一旦我调整窗口大小，所有内容的宽度都会改变，我总是通过 移动“图像持有者 div”，而不是通过静态值。

如果您开始向左和向右滑动图像，然后调整窗口大小，您会发现它继续完美运行。