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

回答

相關問題