Javascript图像幻灯片功能

Question

Is it possible to create a slideshow gallery in javascript with the same formatting as my photo:

Answer 1

What you're referring to is usually done in javascript, but can also be done in java and flash, all though java and flash require plug-ins.

There's no canonical name for it that I know, but Slide show, Image viewer, Gallery, etc. seems to be valid names for it.

Have a look at Highslide .

A simple implementation would include things like addEventListener('click', ...) and 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>