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

Minimal setup for scrollable
http://jquerytools.org/demos/scrollable/index.html

HTMLとscript

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery Tools standalone demo</title>
<link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css">
<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css">
<link rel="stylesheet" type="text/css" href="css/standalone.css">
<script src="js/jquery.tools.min.js"></script>
</head>
<body>
<div style="margin:0 auto; width: 634px; height:120px;">
<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable" id="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-4 -->
<div>
  <img src="img/01.jpg">
  <img src="img/02.jpg">
  <img src="img/03.jpg">
  <img src="img/04.jpg">
</div>
<!-- 5-8 -->
<div>
  <img src="img/05.jpg">
  <img src="img/06.jpg">
  <img src="img/07.jpg">
  <img src="img/08.jpg">
</div>
<!-- 9-12 -->
<div>
  <img src="img/09.jpg">
  <img src="img/10.jpg">
  <img src="img/11.jpg">
  <img src="img/12.jpg">
</div>
</div>
</div>

<!-- "next page" action -->
<a class="next browse right"></a>
</div>
<!-- javascript coding -->
<script>
$(function() {
  // initialize scrollable
  $(".scrollable").scrollable();
});
</script>
</body>
</html>

CSS

body {
    padding:50px 80px;
    font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}
a:active {
    outline:none;
}

:focus {
    -moz-outline-style:none;
.scrollable {
    float:left;
}

a.browse {
    background:url(../img/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
}


a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }

a.left { margin-left: 0px; }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

a.up, a.down  {
    background:url(../img/w/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }


a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


a.disabled {
    visibility:hidden !important;
}
.scrollable {

    position:relative;
    overflow:hidden;
    width: 550px;
    height:120px;

    border:1px solid #ccc;
    background: url(../img/h300.png) repeat-x;
}

.scrollable .items {
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:680px;
}

.scrollable img {
    float:left;
    margin:20px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}