So I have a div with a set width and height, and I want the content inside to slide automatically (without hover or interaction from the user) after like so many seconds to reveal different content. What my actual goal is, I have boxes with an audio player and the notes of the generated content, and I want it to slide up down or left right whatever, to reveal the artist blabhalbalh. You can see what I'm talking about at here.
Oh, silly me. A good example would be Window开发者_运维知识库s Phone 7 live tiles, thats actually what I'm basing it off of.
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%;
}
This might be terrible, but I just pulled it from something I was working on recently. Let me know if it isn't sliding, or needs explanation. using jQuery. there is probably a way better way to position the components initially with css.
精彩评论