doufei9805
2014-07-29 22:41
浏览 374

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

First off, I do apologize if this is a bit vague. I will try my best to explain this as best as I can.

I am trying to create a slideshow affect with a div content.

the content of the div is not images but they are HTML stuff.... buttons to be exact.

I have a div with an overflow hidden and an inner div inside this div with a width of 500000px. I know this is a ridiculous width size but i only done this because the content of this div is pulled from a database and i don't know how much data might be in there in the future. i did try width:auto; but that didn't work.

anyway, this is what I have in my page:

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

now, I need to create a function using jquery that would allow me to slide the innerBottom to left or right using two buttons.

for example if the content is pulled from the database and there is not enough content for the slide to work then the slide is disabled but if there is enough content then the slide to the right is enabled at first and when the slided to the right once, then the slide to left is enabled.

I hope this makes sense and someone could help me out with this.

I did try something like this using jquery:

    <script>


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

</script>

but that only does the left slide once and the inner div disappears for good.

Thanks in advance

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doushao8399 2014-07-29 23:48
    已采纳

    Here's one super simple example I wrote quickly.. see if you can transform it for your needs. Good luck!

    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
            });
        });
    });
    
    点赞 打赏 评论

相关推荐 更多相似问题