Home > jQuery > 画像 > simply-scroll による写真の表示( 146 )

「jQuery simplyScroll - Logicbox」を参考にしました。

codeの追加

1. script

<script type="text/javascript">
$(function(){
	$("#demo4").simplyScroll({
		speed: 3,
		auto:false,
	});
	$('.simply-scroll').css('width','auto');
	$('.simply-scroll').css('height','300px');
	$('.simply-scroll-list li').css('width','auto');
	$('.simply-scroll-list li').css('height','300px');
	$('.simply-scroll .simply-scroll-clip').css('width','100%');
	$('.simply-scroll .simply-scroll-clip').css('height','300px');
});
</script>

2. HTML

	部に記述する。
<link rel="stylesheet" href="css/jquery.simplyscroll.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.simplyscroll.js">P</script>

表示したい部分に記述する。
<ul id="demo4">		←実際に表示する
	<li><img src="画像パス" title="キャプション"></li>	←画像の枚数分追加

</ul>

問題点

1. 「Internet Explorer」の「互換表示」モードでは正常に作動しません。

写真の表示