Question

所以我有一个设置宽度和高度的div，我希望里面的内容能够自动滑动（没有悬停或来自用户的交互），这样就可以显示不同的内容。我的实际目标是，我有一个带有音频播放器的盒子和生成内容的音符，我希望它向下滑动或向右滑动，以显示艺术家blabhalbalh。你可以在here看到我在说什么。

哦，傻我。一个很好的例子是Windows Phone 7实时图块，这实际上就是我的基础。

Answer 1

    var swap = false;
    var w = 309;
    var h = 261;    
    var i = 0;
    var x = 0;
    var q = 1;
    var t;

    window.onload=function(){
        i = initPortfolio();
        setTimeout("portfolioRotate()",2000);
    }

    function initPortfolio(){
        $('.portfolio-item').each(function(index){i = i+1;});
        for(var n=1;n<=i;n=n+1){
            lpos = w * n - w;
            $('#item-'+n).css('left',lpos);
        }
        $('.offs').css('display','block');
        x =  i * w - w;
        return i;
    }
    function portfolioRotate(){
        swap = false;
        $('.portfolio-item').animate({left:'-='+w},6000,function(){
            nn = this.id.split("-")[1];
            if(q==nn && swap==false){
                $('#item-'+q).css('left',x);
                if(q<i){q=q+1}else{q=1};
                swap = true;
                u=setTimeout("portfolioRotate()",2000);
            }
        });
    }

        <div id="portfolio-container">
            <div class="portfolio-item" id="item-1"></div>
            <div class="portfolio-item" id="item-2"></div>
            <div class="portfolio-item" id="item-3"></div>
            <div class="portfolio-item offs" id="item-4"></div>
        </div>

    .offs{
        display:none;
    }
    #portfolio-container{
        width:927px;
        height:318px;
        margin-top:30px;
        position:relative;
        overflow:hidden;
    }
    .portfolio-item{
        width:309;
        padding-top:20px;
        position:absolute;
        height:100%;

    }

这可能很糟糕，但我刚把它从我最近工作的东西中拉出来。如果它没有滑动，或者需要解释，请告诉我。使用jQuery。可能有一种更好的方法来最初用css定位组件。

div内的自动滑动内容？

1 个答案: