jQuery＋CSSによるカルーセルパネルの作り方 - web制作学習用ブログ

jQuery＋CSSによるカルーセルパネルの作り方
http://ascii.jp/elem/000/000/481/481241/

HTMLとscript

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<div id="carouselWrap">
<p id="carouselPrev"><img src="img/btn_prev.gif" alt="前へ" /></p>
<p id="carouselNext"><img src="img/btn_next.gif" alt="次へ" /></p>
<div id="carouse">
<div id="carouselInner">
<ul class="column">
<li><a href="#"><img src="img/photo1_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo2_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo3_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo4_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="img/photo5_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo6_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo7_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo8_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="img/photo9_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo10_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo11_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo12_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="img/photo13_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo14_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo15_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo16_thum.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
<script>
$(function(){
//初期設定
$("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px");
$("#carouselInner ul.column:last").prependTo("#carouselInner");
$("#carouselInner").css("margin-left","-620px")
//戻るボタン
$("#carouselPrev").click(function(){
$("#carouselNext,#carouselPrev").hide();
$("#carouselInner").animate({
marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px"
},"slow","swing" , 
function(){
$("#carouselInner").css("margin-left","-620px")
$("#carouselInner ul.column:last").prependTo("#carouselInner");
$("#carouselNext,#carouselPrev").show();
})
})
//進むボタン
$("#carouselNext").click(function(){
$("#carouselNext,#carouselPrev").hide();
$("#carouselInner").animate({
marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px"
},"slow","swing" , 
function(){
$("#carouselInner").css("margin-left","-620px")
$("#carouselInner ul.column:first").appendTo("#carouselInner");
$("#carouselNext,#carouselPrev").show();
})
})

})
</script>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

* {
  margin:0;
  padding:0;
}
#carouselWrap {
  margin:100px auto;
  width:620px;
  height:135px;
  padding:5px;
  background:url(../img/background.gif);
  position:relative;
}
#carouselPrev {
  position:absolute;
  top:65px;
  left:-8px;
  cursor:pointer;
}
#carouselNext {
  position:absolute;
  top:65px;
  right:-8px;
  cursor:pointer;
}
#carouse {
  width:100%;
  height:100%;
  overflow:hidden;
}
#carouselInner ul.column {
  width:605px;
  height:105px;
  padding:15px 0 15px 15px;
  list-style-type:none;
  float:left;
}
#carouselInner ul.column li {
  float:left;
  margin-right:10px;
  display:inline;
}
#carouselInner ul.column li img {
  border:none;
}