带DIV的水平幻灯片

问题描述

我有一个容器div元素，它应该包含所有子div元素.我看到了这个线程:使用jQuery将div滑出屏幕，我想知道如何来实现它(在div元素内而不是在主体内).代码工作正常，但是如果包装" div元素的宽度为500px怎么办，我应该如何包装子div?我需要使用iframe还是...?

I have a container div element, this should contain all child div elements.I saw this thread: Slide a div offscreen using jQuery and I was wondering how to implement it (within a div element and not in the body).The code is working fine, but what if the "wrapper" div element has 500px width, how am I supposed to wrap the child divs? Am I need to use iframe or ...?

为了更好地理解，我制作了这张图片:

For a better understanding I made this image:

红色矩形将是一个窗口，灰色背景将是墙壁.您只能从窗口中看到并看到当前的div元素.如果按右按钮-aqua-，将看到绿色的div，如果按左按钮，则会看到黄色的div.

The red rectangle would be a window and the grey background the wall. You can only see trough the window and see the current div element. If you push the right button -aqua- you will see the green div and if you push the left button you will see the yellow div.

注意:Div元素应该移动，而不是墙.

Notice: Div elements should move and not the wall.

推荐答案

jQuery用于逻辑，而CSS3用于 transition 和 transform .
多个画廊+自动滑动+悬停时暂停:

jQuery for the logic and CSS3 for transition and transform.
Multiple galleries + Auto-slide + Pause on hover:

$(function(){

  $('.gallery').each(function() {

    var $gal     = $(this),
        $movable = $(".movable", $gal),
        $slides  = $(">*", $movable),
        N        = $slides.length,
        C        = 0,
        itv      = null;

    function play() { itv = setInterval(anim, 3000); }
    function stop() { clearInterval(itv); }
    function anim() {
      C = ($(this).is(".prev") ? --C : ++C) <0 ? N-1 : C%N;
      $movable.css({transform: "translateX(-"+ (C*100) +"%)"});
    }

    $(".prev, .next", this).on("click", anim);
    $gal.hover(stop, play);
    play();

  });

});

.gallery{
  position: relative;
  overflow: hidden;
}
.gallery .movable{
  display: flex;
  height: 70vh;
  transition: transform 0.4s;
}
.gallery .movable > div {
  flex:1;
  min-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Pause on hover and autoslide

<div class="gallery">
  <div class="movable">
    <div style="background:#0af">1 <p style="position:absolute; top:400px;">aaaa</p></div>
    <div style="background:#af9">2</div>
    <div style="background:#f0a">3</div>
  </div>
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

As many galleries as you want

计算幻灯片数量并放入计数器 C .
上一个/下一个单击，操作 C
在自动幻灯片上， $(this).is(.prev")也将评估为 false ，因此将使用 ++ C ，就像点击下一步按钮.
在mouseenter上，只需简单地 clearInterval 当前正在运行的 itv ，并在mouseleave(第二个 .hover 参数)上重新初始化 itv

Count the number of slides and put into a counter C.
On prev/next click manipulate C
On autoslide $(this).is(".prev") will also evaluate as false so ++C will be used, just like clicking the Next button.
On mouseenter simply clearInterval the currently running itv and on mouseleave (the second .hover argument) reinitialize the itv

动画是通过将C * 100和 translateX 乘以-C * 100％

The animation is achieved by multiplying C*100 and translateX by - C * 100 %

这篇关于带DIV的水平幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！