Javascript 根据div的内容左右滑动div？

首先，如果这有点含糊，我很抱歉。我会尽我所能解释这件事

我正在尝试创建一个带有div内容的幻灯片效果

div的内容不是图像，而是HTML内容。。。。确切地说是按钮

我有一个

溢出隐藏的div

，在这个div内部有一个宽度为500000px的内部div。我知道这是一个荒谬的宽度大小，但我这样做是因为这个div的内容是从数据库中提取的，我不知道将来会有多少数据。我试过宽度：自动但这不起作用

无论如何，这就是我在我的页面中的内容：

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

但这只会使左侧滑动一次，内部div将永远消失

---

提前感谢

这里有一个超级简单的例子，我写得很快。。看看你是否能根据自己的需要改变它。祝你好运

HTML

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
        });
    });
});

$（文档）.ready（函数（）{
var保证金=0；
$（'.triggerSlide'）。在（'click'，function（）上{
var amountDivs=$（'.contentDiv'）.length；
var whereTo=$（this.attr（'id'）；
其中to==‘左’？边距-=800：边距+=800；
如果（parseInt（边距）>0）{
保证金=0；
返回false；
}
否则如果（margin jQuery滑块已经被覆盖到了死角，如右侧面板“相关”中所示。这是我提倡使用插件的少数场景之一，因为它们丰富、精简，并且可以为您处理许多边缘案例。我不同意，制作这些幻灯片有利于练习。我已经做了很多..在虽然有点小题大做，但最终我认为这帮我省去了一些麻烦——了解我自己的代码以及它的确切功能可以使调整更改变得容易。@说吧，我宁愿不要使用臃肿的插件（大多数插件都是）如上所述，这可以通过编写自己的代码来实现。此外，大多数插件都不能处理html内容。@user3806613如果您想自己编写，请发布一篇展示您的问题的文章，我将帮助您修改它，为您指出正确的方向。我也不喜欢插件，因为它们通常过于臃肿——但实际上，幻灯片可能会对于大多数jQuery插件来说，它们都有大量的文档记录和优化。
<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>

#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;
   }

$(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
        });
    });
});