jquery幻灯片div [英] jquery slide div within a div

问题描述

我有一个容器div元素，这应该包含所有的子div元素。
我看到了这个线程：使用jQuery 滑动div屏幕。我想知道如何实现它（在div元素，而不是在身体）。
代码工作正常，但如果wrapperdiv元素有500px宽度，我应该如何封装子div？我需要使用iframe或...？

为了更好的理解，我做了这张图片：

红色矩形是一个窗口，灰色背景是墙。你只能看到槽的窗口，看到当前的div元素。如果你按右键 - 你会看到绿色的div，如果你按下左键，你会看到黄色的div。

注意：Div元素应该移动

解决方案

jQuery用于转换的逻辑和CSS3 和转换。

多个图库+自动滑动+悬停时暂停：

  .gallery {position：relative ; overflow：hidden;}。gallery .movable {display：flex;高度：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>暂停悬停和自动滑动< 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>上一页< / button> < button class =next>下一页< / button>< / div>所需的图库数量 
 
 
 
计算幻灯片数量并放入计数器  C 。
 
上一页/下一页点击操作 C  
 
在自动滑动 $（this）.is（。prev）也将被计算为 false ，因此将使用 ++ C  em>下一步按钮。
 
在mouseenter上只需 clearInterval 当前正在运行的 itv 和mouseleave（第二个 .hover 参数）重新初始化 itv  
 
 
 
动画是通过将C * 100和 translateX 乘以  -  C * 100％ 
 
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:


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.

Notice: Div elements should move and not the wall.
解决方案
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





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

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

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