jquery幻灯片格内div

我有一个容器div元素，这应该包含所有的子div元素。我看到这个线程：Slide a div offscreen using jQuery，我想知道如何实现它（在一个div元素，而不是在身体）。代码工作正常，但如果“包装”div元素具有500px宽度，我该如何包装子div？我需要使用iframe还是...？jquery幻灯片格内div

为了更好地理解我在此图像： enter image description here

红色矩形将是一个窗口和灰色背景的壁。您只能看到通过窗口看到当前的div元素。如果你按下右按钮-aqua-，你会看到绿色的div，如果你按下左边的按钮，你会看到黄色的div。

注意：div元素应移动而不是墙壁。

来源

2013-03-11 Zbarcea Christian

化妆用途的'偏移（实现）'或者使用'left'属性设置'position（）'并使div生效。 – Jai 2013-03-11 12:02:39

jQuery的逻辑和CSS3的transition和transform。
多画廊+自动滑动+暂停悬停：

$(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
在autoslide $(this).is(".prev")也将评估为false所以++C将被使用，就像单击下一步按钮。
论的mouseenter简单地clearInterval当前运行itv和鼠标离开（第二.hover参数）重新初始化itv

的动画是通过乘以C * 100和translateX通过- C * 100 %

来源

2013-03-11 12:22:12

我修改过，所以它没有点击转盘，https://jsfiddle.net/yddcxxef/1/。我只是想知道如何添加一个功能，在悬停时暂停滑块并在未悬停时继续？谢谢。此外，它是连续的？ – SearchForKnowledge 2016-09-20 15:20:56

@SearchForKnowledge上面的例子并不适用于无限的滑块，尽管对CSS和JS进行了一些修改，但它很容易实现，但滑块重新排序。你的演示是无用的，你可以看到:)（和代码甚至不合适）。对于autoslide，你需要保持相同的逻辑，但创建'auto'' play'和'stop'功能。比你喜欢'$ gal.hover（停止，播放）;''停止'清除一个时间间隔，'play'启动那个时间间隔内的'anim'逻辑。 – 2016-09-20 20:59:42

我想;）。我实际上创造了一个更好的小提琴，但能够找出问题。感谢您的回应。 – SearchForKnowledge 2016-09-21 14:25:41

将所有三个div添加到容器div中，然后使窗口环绕长div并隐藏溢出。

实施例，如果窗口区域是960像素，然后内部的股利将是3×960（2880）

，可以通过改变它是由960增量左位置（放置长的div在相对定位和窗口居中溢出隐藏）

#window{ 
width:960px; 
overflow: hidden; 
} 

#container{ 
position: relative; 
left: -960px; 
} 

.content_box{ 
width:960px; 
}

然后你可以使用JavaScript（jQuery的），以动画的左侧位置：

$('#arrow-left').click(function() { 
    $('#container').animate({ 
    left: '-=960' 
    }, 5000, function() { 
    // Animation complete. 
    }); 
}); 


$('#arrow-right').click(function() { 
    $('#container').animate({ 
    left: '+=960' 
    }, 5000, function() { 
    // Animation complete. 
    }); 
});

更多.animate可以foun d手册中：

来源

2013-03-11 12:03:11 kingdomcreation

...你的意思是'溢出：隐藏;' – 2013-03-11 12:03:50

<div id="parent"> 
    <div id="container"> 
    <div id="child1"></div> 
    <div id="child2"></div> 
    </div> 
</div>

得到母体红色的div CSS属性：

position: relative; 
overflow: hidden; 
width: 500px; 
height: somevalue;

包住孩子与另一个格 “例如容器” 的div，并给它下面的CSS属性：

position: absolute; 
width: ;/*overall width of all children divs including margins*/ 
top: 0; 
left: 0; 
height: ;/*same as parent*/

终于为孩子的div：

float: left; 
height: ;/*same as parent*/

来源

2013-03-11 12:15:12 razzak

jquery幻灯片格内div

回答

相关问题