いや、「作った」と言っても一から自分で作れるはずもなく、人様が書いたスクリプトを利用しただけのことです。
このブログに納めるには、サイズが大きすぎて全体が表示出来ません。
本当はメリーゴーラウンドのように、奥行きのあるものにしたかったのですが、半日かけてElixon Theatre 2.5というスクリプトの利用を試みましたが、うまくできず、今日のところは諦めました。
今回使ったのは、
FilmRoll: jQuery Carousel
の改造版に、さらに手を加えました。
<!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="pragma" content="No-Cache">
<title>jQueryによるカルーセル</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.film_roll.min.js"></script>
<script>
$(function() {
fr = new FilmRoll({
container: '#film_roll_slider',
animation: 1500,
interval: 4000,
no_css: true,
//pager: false,
prev: '#film_roll_prev',
next: '#film_roll_next'
});
});
//スライダー追加設定
$(function() {
$("#film_roll_slider,#film_roll_arrow").hover(
function(){
$("#film_roll_arrow").stop(true).fadeTo('normal', 1.0);
},
function(){
$("#film_roll_arrow").fadeTo('fast', 0);
});
//ページャーのURL設定
$(".film_roll_pager a:eq(0)").attr("href", "#")
$(".film_roll_pager a:eq(1)").attr("href", "#")
$(".film_roll_pager a:eq(2)").attr("href", "#")
$(".film_roll_pager a:eq(3)").attr("href", "#")
$(".film_roll_pager a:eq(4)").attr("href", "#")
$(".film_roll_pager a:eq(5)").attr("href", "#")
$(".film_roll_pager a:eq(6)").attr("href", "#")
$(".film_roll_pager a:eq(7)").attr("href", "#")
});
</script>
<style>
* {
padding: 0;
margin: 0;
}
.film_roll_wrapper {
overflow: hidden;
}
.film_roll_shuttle {
position: relative;
}
.film_roll_child {
display: inline-block;
margin-right: 15px;
}
.btn_prev,
.btn_next {
position: relative;
top: -100px;
width: 48px;
height: 48px;
}
.btn_prev {
left: -53px;
}
.btn_next {
right: -595px;
}
.btn_prev:hover,
.btn_next:hover {
opacity: 0.5;
}
.film_roll_pager {
text-align: center;
}
.film_roll_pager a {
display: inline-block;
width: 15px;
height: 50px;
margin: 10px 15px 0px 0px;
}
.film_roll_pager a:nth-child(1) {background: url(images/bullet-Black.png) no-repeat; opacity: 0.3}
.film_roll_pager a:nth-child(2) {background: url(images/bullet-Black.png) no-repeat; opacity: 0.3}
.film_roll_pager a:nth-child(3) {background: url(images/bullet-Black.png) no-repeat; opacity: 0.3}
.film_roll_pager a:nth-child(4) {background: url(images/bullet-Black.png) no-repeat; opacity: 0.3}
.film_roll_pager a:nth-child(5) {background: url(images/bullet-Black.png) no-repeat; opacity: 0.3}
.film_roll_pager a:nth-child(6) {background: url(images/bullet-Black.png) no-repeat; opacity: 0.3}
.film_roll_pager a:nth-child(7) {background: url(images/bullet-Black.png) no-repeat; opacity: 0.3}
.film_roll_pager a:nth-child(8) {background: url(images/bullet-Black.png) no-repeat; opacity: 0.3}
.film_roll_pager a.active:nth-child(1),
.film_roll_pager a.active:nth-child(2),
.film_roll_pager a.active:nth-child(3),
.film_roll_pager a.active:nth-child(4),
.film_roll_pager a.active:nth-child(5),
.film_roll_pager a.active:nth-child(6),
.film_roll_pager a.active:nth-child(7),
.film_roll_pager a.active:nth-child(8)
{opacity: 0.8;}
.film_roll_pager span {
display: none;
}
#film_roll_arrow {
display: none;
}
</style>
</head>
<body>
<div id="film_roll_slider" style="width: 640px; height: 150px; margin: 2em 0px 2em 50px;">
<div><a href="#" title=""><img src="../img/vegetables/kewpie150.gif"></a></div>
<div><a href="#" target="_top" title="トマト"><img src="../img/vegetables/tomato150.gif"></a></div>
<div><a href="#" target="_top" title="トウモロコシ"><img src="../img/vegetables/corn150.gif"></a></div>
<div><a href="#" target="_top" title="タマネギ"><img src="../img/vegetables/onion150.gif"></a></div>
<div><a href="#" target="_top" title="キャベツ"><img src="../img/vegetables/cabbage150.gif"></a></div>
<div><a href="#" target="_top" title="なす"><img src="../img/vegetables/eggplant150.gif"></a></div>
<div><a href="#" target="_top" title="ピーマン"><img src="../img/vegetables/pimento150.gif"></a></div>
<div><a href="#" target="_top" title="にんじん"><img src="../img/vegetables/carrot150.gif"></a></div>
<div><a href="#" target="_top" title="レタス"><img src="../img/vegetables/lettus150.gif"></a></div>
</div>
<div id="film_roll_arrow" style=" margin: -2em 0px 0px 50px; width: 640px; height: 1px;">
<a href="#" class="btn_prev" id="film_roll_prev"><img src="images/prev02.png" alt=""></a>
<a href="#" class="btn_next" id="film_roll_next"><img src="images/next02.png" alt=""></a>
</div>
</body>
</html>
実は、jQuery Carousel Evolution というスクリプトを使いたいのですが、お試し版がないので、躊躇しています。
