doufei9805 2014-07-29 22:41
浏览 459
已采纳

根据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
            });
        });
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题