body{ background:url(img/bg.jpg) center; }
#banner{
width:730px;
height:390px;/*border:solid 1px #ff0;*/margin:100px auto 0px;
background-image:url(img/1.png);
border-radius:10px;
box-shadow:0px 0px 15px #fff;
}
#btn{
width:55px;
height:280px;
position:fixed;
right:30px;
top:150px;
}
#btn ul li{
list-style:none;
width:55px; height:55px;
border-radius:100%;
margin:10px0;
background-image:url(img/icon.jpg);
cursor:pointer;
}
$("#btn ul li").click(function(){
clearInterval(play);
indexc=$(this).index();/*$(this).animate({‘background-position-x‘:‘-80px‘},500).siblings().css(‘background-position-x‘,‘0‘);
$("#banner").animate({‘background-position-y‘:-390*indexc+‘px‘},500);*/move();
play=play=setInterval(function()
{
indexc++;
indexc%=4;
move();
},3000) ;
});
play=setInterval(function()
{
indexc++;
indexc%=4;
move();
},3000) ;
function move()
{
$("#btn ul li").eq(indexc).animate({‘background-position-x‘:‘-80px‘},500).siblings().css(‘background-position-x‘,‘0‘);
$("#banner").animate({‘background-position-y‘:-390*indexc+‘px‘},500);
}
});