参照： AnythingSlider
ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。
Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、 通信結果に応じてDHTMLで動的にページの一部を書き換えるというアプローチを取る。AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。
- Ajax From Wikipedia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.anythingslider.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "再生", // Start text
stopText: "停止", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
<!-- CSS -->
<style type="text/css">
/*
anythingSlider v1.0
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/
.anythingSlider {
width:580px; /* 画像の幅 + 80px */
height:287px; /* 画像の高さ + 6px */
position:relative;
margin:0 auto;
}
.anythingSlider .wrapper {
width:500px; /* 画像の幅 */
height:287px; /* 画像の高さ + 6px */
overflow:hidden;
margin:0 40px; padding:0;
position:absolute;
top:0; left:0;
}
.anythingSlider .wrapper ul {
width:99999px;
list-style:none;
position:absolute;
top:0; left:0;
background:#dbca9e;
border-top:3px solid #e0a213;
border-bottom:3px solid #e0a213;
margin:0; padding:0;
}
.anythingSlider ul li {
display:block;
float:left;
list-style:none;
width:500px; height:281px; /* 画像サイズ */
margin:0; padding:0;
}
.anythingSlider .arrow {
display:block;
height:200px; width:67px;
background:url(/content/img/ajax//arrows.png) no-repeat 0 0;
text-indent:-9999px;
position:absolute;
top:40px;
cursor:pointer;
}
.anythingSlider .forward { background-position:0 0; right:-20px; }
.anythingSlider .back { background-position:-67px 0; left:-20px; }
.anythingSlider .forward:hover { background-position:0 -200px; }
.anythingSlider .back:hover { background-position:-67px -200px; }
.anythingSlider a { text-decoration:none; }
#thumbNav { position:relative; top:287px; text-align:center;}
#thumbNav a {
color:black;
display:inline-block;
margin:0 5px 0 0; padding:2px 8px;
height:18px;
background:#c58b04 url(/content/img/ajax/cellshade.png) repeat-x;
text-align:center;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#thumbNav a:hover { background-image:none; }
#thumbNav a.cur { background:#e0a213; }
#start-stop { background:green;
background-image:url(/content/img/ajax/cellshade.png);
background-repeat:repeat-x;
color:white;
padding:2px 5px;
width:40px;
text-align:center;
position:absolute;
right:45px; top:287px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#start-stop.playing { background-color:red; }
#start-stop:hover { background-image:none; }
/*
Prevents
*/
#textSlide { padding:20px 30px;}
#textSlide h3 { font-size:150%; margin:0; padding:0; }
#textSlide img { float:right; margin:10px 0 10px 10px; }
#quoteSlide { padding:20px 30px;}
#quoteSlide blockquote { color:#444; margin:0 0 10px 0; padding:30px; border:1px solid #e0a213; }
#quoteSlide p { margin:10px 0 0 0; text-align:right; font-size:80%; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照： <a href='http://css-tricks.com/examples/AnythingSlider/'>AnythingSlider</a></p>
<!-- CODE -->
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li><!-- 1 -->
<img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg" alt="サラダ@オ・タン・ジャディス" />
</li>
<li><!-- 2 -->
<div id="textSlide">
<img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_m.jpg" alt="ノルディック＠オ・タン・ジャディス" />
<h3>ノルディック＠オ・タン・ジャディス</h3>
<p>ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。</p>
</div>
</li>
<li><!-- 3 -->
<img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg" alt="塩バターキャラメルのクレープ @オ・タン・ジャディス" />
</li>
<li><!-- 4 -->
<img src="http://farm3.static.flickr.com/2527/4193010288_532f1b80db.jpg" alt="ネギトロとアボカドの生春巻@福みみ" width="500" height="281" />
</li>
<li><!-- 5 -->
<div id="quoteSlide">
<blockquote>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、 通信結果に応じてDHTMLで動的にページの一部を書き換えるというアプローチを取る。AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</blockquote>
<p> - <a href='http://ja.wikipedia.org/wiki/Ajax'>Ajax</a> From Wikipedia</p>
</div>
</li>
</ul>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>