0

コイン500枚
カルーセルについて //jquary
$(function(){
$("#s2").click(function(){
$("#s5").animate({marginLeft:parseInt($("#s5").css("marginLeft"))-220+"px"},"slow","swing",
function(){
$("ul.s6:last").appendTo("#s5");
$("#s5").css("marginLeft","0px");
});
});
$("#s3").click(function(){
$("#s5").animate({marginLeft:parseInt($("#s5").css("marginLeft"))+220+"px"},"slow","swing",
function(){
$("ul.s6:first").prependTo("#s5");
$("#s5").css("marginLeft","-220px");
});
});
//html
<div id="s1">
<div id="s2"><img src="rtp/hida.jpg"></div>
<div id="s3"><img src="rtp/migi.jpg"></div>
<div id="s4">
<div id="s5" class="cerafix">
<ul class="s6 clearfix">
<li><img src="rtp/01.jpg" width="100px" height="100px"></li>
<li><img src="rtp/02.jpg" width="100px" height="100px"></li>

</ul>
<ul class="s6 clearfix">
<li><img src="rtp/01.jpg" width="100px" height="100px"></li>
<li><img src="rtp/02.jpg" width="100px" height="100px"></li>

</ul>

</div>

</div>


</div>
//css
#s1{
width:300px;
height:130px;
margin:auto;
border:solid 2px #c3f;
position:relative;
}
#s2{
position:absolute;
cursor:pointer;
top:30px;

}
#s3{
position:absolute;
cursor:pointer;
top:30px;
left:280px;

}
#s4{
width:300px;
height:130px;
overflow:hidden;
}
#s5{
width:700px;
height:130px;
}
ul.s6{
float:left;
list-style-type:none;
width:200px;
}
ul.s6 li{
float:left;
}



fastにしてすれば気にならないのですが、
最初と切り替えたときに空白の時間と、初期に戻るような形になります。

初期値の画像の初期値を設定しても是正されませんでした。

アドバイスお願いします

投票で選ばれたベストソリューション

Yahoo!知恵袋 4044日前