トップ  >  2010年  >  - 20100115 jQuery でスライドショー(jQuery plugin - Easy Image or Content Slider)
features
jQuery でスライドショー
2010.01.15記

  戻る

css globe: jQuery plugin - Easy Image or Content Slider

  http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider

  • 東京駅
  • 日暮里駅
  • フジテレビ
  • メリア
  • 黄色いゴーヤ


HTML

<div id="slider">
	<ul>
		<li><img src="./files/20100115/g1.jpg" alt="東京駅" /></li>
		<li><img src="./files/20100115/g2.jpg" alt="日暮里駅" /></li>
		<li><img src="./files/20100115/g3.jpg" alt="フジテレビ" /></li>
		<li><img src="./files/20100115/g4.jpg" alt="メリア" /></li>
		<li><img src="./files/20100115/g5.jpg" alt="黄色いゴーヤ" /></li>
	</ul>
</div>
Default non-styled image sliderを設置しました

ヘッダ JavaScript

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="/common/ezs/easySlider.packed.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	$("#slider").easySlider();
});
</script>
ここでは、jQuery は Google AJAX Libraries API を利用してロードしています。

CSS

<style type="text/css" media="screen">
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
}
#slider, #slider li{ 
	width:580px;
	height:200px;
	overflow:hidden; 
}
</style>
当サイトで表示できるように調整しました
前
2010.01.15 jQuery でスライドショー
カテゴリートップ
2010年

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999 keibunsya all right reserved.