JQuery でスライダー

メモ

```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-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" >&lt; 右</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" >左 &gt;</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" >&lt; 右</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-ｒｉｇｈｔ" >左 &gt;</a>
                </li>
            </ul>
        </div>
    </body>
</html>
```