Question

首先，如果这有点含糊，我会道歉。我将尽我所能尽力解释这一点。

我正在尝试使用div内容创建幻灯片效果。

div的内容不是图像，但它们是HTML的东西......确切地说是按钮。

我在div中有一个overflow hidden和内部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
        });
    });
});

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

1 个答案: