根據div的內容左右滑動div？

Question

首先，如果這有點含糊，我要道歉。 我將盡我所能盡力解釋。

我正在嘗試創建一個具有div內容的幻燈片顯示效果。

div的內容不是圖像，而是HTML內容。...確切地說是按鈕。

我有一個overflow hidden了overflow hidden的div，並且此div內部有一個內部div，寬度為500000px。 我知道這是一個荒謬的寬度大小，但我這樣做是因為此div的內容是從數據庫中提取的，而且我不知道將來可能有多少數據。 我確實嘗試過width:auto; 但這沒用。

無論如何，這就是我頁面中的內容：

<div style="padding-left:15px; overflow:hidden;">
<div class="innerBottom" style="width:500000px;">
<?PHP echo $date_list; ?>
</div>
</div> 

現在，我需要使用jquery創建一個函數，該函數將允許我使用兩個按鈕將innerBottom左右滑動。

例如，如果內容是從數據庫中拉出的，並且沒有足夠的內容供幻燈片使用，則該幻燈片被禁用，但是如果有足夠的內容，則首先啟用向右的幻燈片，而向右滑動一次，然后啟用向左滑動。

我希望這是有道理的，有人可以幫助我。

我確實嘗試過使用jquery這樣的事情：

    <script>


    $("#button-bottom").click(function () {
  $('.innerBottom').animate({'margin-left':'3px'});
}, function() {
 $('.innerBottom').animate({'margin-left':'1003px'});
});

</script>

但這只會使左側滑動一次並且內部div永遠消失。

提前致謝

Answer 1

這是我快速編寫的一個超級簡單的示例。.看看是否可以根據需要進行轉換。 祝好運！

http://jsfiddle.net/e4g9h/1/

HTML

<div id="mainWrapper">
    <div id="wrapper">
        <div id="slider" style="">
            <div class="contentDiv">
                <input type="button" class="buttons" value="Button 1"/>
            </div>
            <div class="contentDiv">
                <input type="button" class="buttons" value="Button 2"/>
            </div>
        </div>
    </div>
    <div id="left" class="triggerSlide">Go Left</div>
    <div id="right" class="triggerSlide">Go Right</div>
</div>

CSS

#mainWrapper{
   width: 800px;
   }

#wrapper{
   width: 800px;
   height: 100px;
   overflow: hidden;
   border: 1px solid black;
   }

#slider{
   width: 1600px;
   text-align: center;
   }

.contentDiv{
   width: 800px; 
   float: left;
   }

.buttons{
   width: 600px;
   height: 90px;
   }

.triggerSlide{
   text-align: center;
   padding: 5px;
   display: inline-block;
   width: 100px;
   border: 1px solid red;
   cursor: pointer;
   }

jQuery的

$(document).ready(function(){
var margin = 0;
$('.triggerSlide').on('click',function(){
    var amountDivs = $('.contentDiv').length;
    var whereTo = $(this).attr('id');

    whereTo == 'left' ? margin -= 800 : margin += 800;

    if(parseInt(margin) > 0){
        margin = 0;
        return false;
        }
    else if(margin <= -Math.abs(amountDivs * 800)){
        margin = -Math.abs((parseInt(amountDivs) -1) * 800);
        return false;
        }

    $('#slider').animate({
        marginLeft: margin
        });
    });
});