Javascript图像幻灯片功能

Question

是否可以在javascript中创建幻灯片库，其格式与我的照片相同：

Answer 1

你所指的通常是用javascript完成的，但也可以用java和flash完成，尽管java和flash都需要插件。

我知道没有规范的名称，但幻灯片放映，图片浏览器，图库等似乎是它的有效名称。

查看Highslide。

简单的实现包括addEventListener('click', ...)和img.src = '...'等内容。

Answer 2

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
    jQuery(".small_image").click(function(){
        path = $(this).find('img').attr('src');
        $('.big_image').find('img').attr('src',path);
    });
});
</script>
<style>
    .image_holder
    {
        width:400px;
        margin:auto;
    }
    .big_image
    {
        width:398px;
        height:400px;
        clear:both;
        border:solid 1px #999999;
    }

    .small_image
    {
        width:80px;
        height:80px;
        border:solid 1px #999999;
        float:left;
    }
</style>

<div class="image_holder">
<div class="big_image"><img src="http://www.australia.com/contentimages/about-landscapes-nature.jpg"  height="400px" width="398px" /></div>

<div class="small_image"><img src="http://www.australia.com/contentimages/about-landscapes-nature.jpg"  height="78px" width="78px" /></div>
<div class="small_image"><img src="http://www.australia.com/contentimages/explore-things-to-see-do-nature.jpg"  height="78px" width="78px" /></div>
<div class="small_image"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg"  height="78px" width="78px" /></div>
<div class="small_image"><img src="http://www.whitegadget.com/attachments/pc-wallpapers/16215d1222951905-nature-photos-wallpapers-images-beautiful-pictures-nature-444-photos.jpg"  height="78px" width="78px" /></div>
</div>