メモ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>スライダー ケース１</title>
<script src="/jq-plugin/jquery/jquery-1.10.2.js">
<!-- jquery 1.10.2 -->
</script>
<script>
$(document).ready(function() {
$.fn.slider = function(args) {
var param = {};
param.slider = args.slider || ".slider";
param.moveLeft = args.moveLeft || ".move-left";
param.moveRight = args.moveRight || ".move-right";
var $this = $(this);
var viewpos = 0;
var $sliders = $this.find(param.slider);
$sliders.each(function() {
$(this).css({
left : ($(this).index() * $(this).width())
});
});
$this.find(param.moveLeft).click(function() {
viewpos--;
if (viewpos < 1 - $sliders.size()) {
viewpos = 1 - $sliders.size();
}
$sliders.each(function() {
$(this).animate({
left : (($(this).index() + viewpos) * $(this).width())
}, param.speed);
});
return false;
});
$this.find(param.moveRight).click(function() {
viewpos++;
if (viewpos > 0) {
viewpos = 0;
}
$sliders.each(function() {
$(this).animate({
left : (($(this).index() + viewpos) * $(this).width())
}, param.speed);
});
return false;
});
};
// セレクタ変更
$("#group1").slider({
slider : ".slider",
moveLeft : ".move-left",
moveRight : ".move-right",
speed: 100
});
});
</script>
<style>
ul.controller li {
list-style: none;
display: inline-block;
}
div.contents {
width: 500px;
height: 300px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
div.contents div {
position: absolute;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="group1">
<ul class="controller">
<li>
<a href="javascript:void(0)" class="move-left" >< 右</a>
</li>
<li>
<div id="contents" class="contents">
<div class="slider">
<span>内容１</span>
</div>
<div class="slider">
<span>内容２</span>
</div>
<div class="slider">
<span>内容３</span>
</div>
<div class="slider">
<span>内容４</span>
</div>
<div class="slider">
<span>内容５</span>
</div>
</div>
</li>
<li>
<a href="javascript:void(0)" class="move-right" >左 ></a>
</li>
</ul>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>スライダー ケース１</title>
<script src="/jq-plugin/jquery/jquery-1.10.2.js">
<!-- jquery 1.10.2 -->
</script>
<script>
$(document).ready(function() {
$.fn.slider = function(args) {
var param = {};
param.slider = args.slider || ".slider";
param.moveLeft = args.moveLeft || ".move-left";
param.moveRight = args.moveRight || ".move-right";
var $this = $(this);
var viewpos = 0;
var $sliders = $this.find(param.slider);
$sliders.each(function() {
$(this).css({
left : ($(this).index() * $(this).width())
});
});
$this.find(param.moveLeft).click(function() {
viewpos--;
if (viewpos < 1 - $sliders.size()) {
viewpos = 1 - $sliders.size();
}
$sliders.each(function() {
$(this).animate({
left : (($(this).index() + viewpos) * $(this).width())
}, param.speed);
});
return false;
});
$this.find(param.moveRight).click(function() {
viewpos++;
if (viewpos > 0) {
viewpos = 0;
}
$sliders.each(function() {
$(this).animate({
left : (($(this).index() + viewpos) * $(this).width())
}, param.speed);
});
return false;
});
};
// セレクタ変更
$("#group1").slider({
slider : ".slider",
moveLeft : ".move-left",
moveRight : ".move-ｒｉｇｈｔ",
speed: 100
});
});
</script>
<style>
ul.controller li {
list-style: none;
display: inline-block;
}
div.contents {
width: 500px;
height: 300px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
div.contents div {
position: absolute;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="group1">
<ul class="controller">
<li>
<a href="javascript:void(0)" class="move-left" >< 右</a>
</li>
<li>
<div id="contents" class="contents">
<div class="slider">
<span>内容１</span>
</div>
<div class="slider">
<span>内容２</span>
</div>
<div class="slider">
<span>内容３</span>
</div>
<div class="slider">
<span>内容４</span>
</div>
<div class="slider">
<span>内容５</span>
</div>
</div>
</li>
<li>
<a href="javascript:void(0)" class="move-ｒｉｇｈｔ" >左 ></a>
</li>
</ul>
</div>
</body>
</html>