JQuery 横スライド

STUDY MEMO Jquery

■JQuery/ 横スライド
-SAMPLE-

・下記サイトよりダウンロード（jsファイルに入っている　easySlider1.7.js　のみ使用。）
Easy Slider 17 Numeric Navigation jQuery Slider

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery easySlider</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(function(){
  $("#slider").easySlider({
	controlsShow:false,
	speed:1200,
	auto:true,
	continuous:true
  });
});
</script>
<style type="text/css">
<!--
#slider ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#slider li{
 width: 640px;
 height: 427px;
}
-->
</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
</ul>
</div>
</body>
</html>


■JQuery NIVO_slider
-SAMPLE-

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<head>
<title>Nivo Slider</title>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen">
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen">
<link rel="stylesheet" href="demo/style.css" type="text/css" media="screen">
</head>
<body>
<div id="wrapper">

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/01.jpg" data-thumb="images/01.jpg" alt="">
<a href="http://dev7studios.com"><img src="images/02.jpg" data-thumb="images/02.jpg" alt="" title="This is an example of a caption"></a>
<img src="images/03.jpg" data-thumb="images/03.jpg" alt="" data-transition="slideInLeft">
<img src="images/04.jpg" data-thumb="images/04.jpg" alt="" title="#htmlcaption">
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
</div>
</div>

</div>
<script type="text/javascript" src="demo/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
	$(window).load(function() {
			$('#slider').nivoSlider();
	});
</script>
</body>
</html>

○nivoslider 参考サイト○
Nivo Slider
http://webhako.net/jquery/plugin-nivo_slider/