▼html側
<body>
<div id="allwrap">
<h1>画像の切替</h1>
<div id="yoko"><!--見える部分-->
<div id="yoko_in"><!--動く部分-->
<div id="no01" class="yoko_all">
<h2><span>画像の切替</span></h2>
<p><img src="img_01.png" alt="AAA" width="200" height="150" /></p>
<p>内容<br>テキストダミー</p>
</div>
<div id="no02" class="yoko_all">
<h2><span>画像の切替</span></h2>
<p><img src="img_01.png" alt="AAA" width="200" height="150" /></p>
<p>内容<br>テキストダミー</p>
</div>
<div id="no03" class="yoko_all">
<h2><span>画像の切替</span></h2>
<p><img src="img_01.png" alt="AAA" width="200" height="150" /></p>
<p>内容<br>テキストダミー</p>
</div>
<div id="no04" class="yoko_all">
<h2><span>画像の切替</span></h2>
<p><img src="img_01.png" alt="AAA" width="200" height="150" /></p>
<p>内容<br>テキストダミー</p>
</div>
</div><!--//yoko_in-->
</div><!--//yoko-->
<div id="btn_box">
<p class="prev_btn">＜＜左</p>
<p class="next_btn">右＞＞</p>
</div>
<p>テキストテキストテキスト</p>
</div><!--//all-->
</body>▼CSS側
body{
margin: 20px 0;
}
h2{
height:16px;
}
#allwrap{/*全体のセンター*/
margin:20px auto;
text-align:center;
position:relative;/*ボタンも動かすから*/
}
/* yoko */
#yoko{/*見える部分*/
width:900px;
height:500px;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#yoko_in{/*動く部分*/
height:100%;
width:;
}
#yoko_in .yoko_all{
width:;
float:left;
background:#eeeeee;
}
/* btn_box */
#btn_box{
width:100%;
position:absolute;
top:50px;
left:0;
}
#btn_box p{
width:50px;
height:50px;
padding:10px;
background:#666666;
color:#ffffff;
cursor:pointer;
}
#btn_box .prev_btn{float:left;}
#btn_box .next_btn{float:right;}▼js側
$(function(){
var mg ="900";//横幅を指定
//横に並ばせる（フロート）
$("#yoko_in .yoko_all").css("width",mg);
$("#yoko_in").css({width:mg*$("#yoko_in .yoko_all").length,margin-left:-mg+"px"});//横幅×yoko_allの数
$("#yoko_in div.yoko_all:last").prependTo("#yoko_in");//一番後ろを前に
//next
$("#btn_box .next_btn").click(function(){
$("h2 span").fadeOut("fast");
$("#yoko_in:not(:animated)").animate({marginLeft:parseInt($("#yoko_in").css("margin-left"))-mg+"px"},"slow","swing",
function(){
$("#yoko_in").css("margin-left",-mg+"px");
$("#yoko_in div.yoko_all:first").appendTo("#yoko_in");
$("h2 span").fadeIn("slow");
});
});
//prev
$("#btn_box .prev_btn").click(function(){
$("h2 span").fadeOut("fast");
$("#yoko_in:not(:animated)").animate({marginLeft:parseInt($("#yoko_in").css("margin-left"))+mg*1+"px"},"slow","swing",
function(){
$("#yoko_in").css("margin-left",-mg+"px");
$("#yoko_in div.yoko_all:last").prependTo("#yoko_in");
$("h2 span").fadeIn("slow");
});
});
//マウスオーバー（透明・不透明）
$("#btn_box p").css("opacity",0.5);
$("#btn_box p").mouseover(function(){
$(this).css("opacity",1);}).mouseout(function(){
$(this).css("opacity",0.5)});
});
※ボタンのボックス（#btn_box）のところとコンテンツ内の重なってる部分に リンクがあるとリンクされない。のでmouseoverしたら、コンテンツを前にだす。（z-index）
0 件のコメント:
コメントを投稿