【jQuery】複数画像を切り替える ～ jCarouselLite の使用　～

jQuery

解決方法

 * jQuery + jCarouselLite を使用することで解決。

後日談

 * jCarouselLiteは、IEで色々とトラブルがあるらしい。で、jCarouselがあるらしい。
http://blog.mufu.jp/2009/01/jcarousellitejcarousel.html

jCarouselについて

http://www.atmarkit.co.jp/fwcr/design/tool/jqueryplugin05/01.html
http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/jcarousel_static.inc&ttl=jCarousel+v+0.2.2+Static%83%5E%83C%83v%82%CC%90%DD%92u%83T%83%93%83v%83%8B
http://blog.jokerstyle.org/archives/411
http://www.syboos.jp/opensource/bookmark/detail/jcarousel.html
 * 更に、Slider Kitもある。詳細は、以下。
http://blogs.yahoo.co.jp/dk521123/26631495.html

サンプル

index.html

<html>
<head>
<script type="text/javascript" src="./jquery-1.6.1.min.js">
<script type="text/javascript" src="./jquery.easing.js"></script>
<script type="text/javascript" src="./jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
        $(function() {
            $(".jCarouselLite").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev",
                visible : 2,
                speed: 500,
                easing: "linear"
            });
        });
</script>
<style type="text/css">
.carousel button.next {
	position: absolute;
	top: 10px;
	right: 10px;
}

.carousel button.prev {
	position: absolute;
	top: 10px;
	left: 10px;
}
</style>
</head>
<body>
<div class="carousel">
    <button class="prev"><< Prev</button><br>
    <button class="next">Next >></button><br>
    <div class="jCarouselLite">
        <ul>
        <li><img src="movie0001.jpg" alt="" width="150" height="118" /></li>
        <li><img src="movie0002.jpg" alt="" width="150" height="118" /></li>
        <li><img src="movie0003.jpg" alt="" width="150" height="118" /></li>
        <li><img src="movie0004.jpg" alt="" width="150" height="118" /></li>
        </ul>
    </div>
</div>
</body>
</html>

参考資料

http://grow.weblike.jp/immature_design/javascript/178.html

関連記事

複数画像を切り替える ～ jCarouselLite の使用　～

http://blogs.yahoo.co.jp/dk521123/24754786.html

複数画像を切り替える ～ Slider Kit の使用（１）　～

http://blogs.yahoo.co.jp/dk521123/26631495.html

自動再生で切り替える ～ Slider Kit の使用（２）　～

http://blogs.yahoo.co.jp/dk521123/27641589.html

自動再生で画像を表示させる ～ Photo Slider の使用　～

http://blogs.yahoo.co.jp/dk521123/27638967.html

複数の画像をスライドショーで表示する ～ Cycleの使用　～

http://blogs.yahoo.co.jp/dk521123/27660372.html

フェードイン・アウトで表示する ～ Innerfade の使用　～

http://blogs.yahoo.co.jp/dk521123/27646370.html