实现轮播图

HTML：

<div id="imagegallery">

    <a href="images/1.jpg" title="美女A">

        <img src="images/1-small.jpg" width="100px" alt="美女1" />

    </a>

    <a href="images/2.jpg" title="美女B">

        <img src="images/2-small.jpg" width="100px" alt="美女2" />

    </a>

    <a href="images/3.jpg" title="美女C">

        <img src="images/3-small.jpg" width="100px" alt="美女3" />

    </a>

    <a href="images/4.jpg" title="美女D">

        <img src="images/4-small.jpg" width="100px" alt="美女4" />

    </a>

</div>

<div style="clear:both"></div>

<img id="image" src="images/placeholder.png" alt="" width="450px" />

<p id="des">

css样式

  body {

            font-family: "Helvetica","Arial",serif;

            color: #333;

            background-color: #ccc;

            margin: 1em 10%;

        }

        h1 {

            color: #333;

            background-color: transparent;

        }

        a {

            color: #c60;

            background-color: transparent;

            font-weight: bold;

            text-decoration: none;

        }

        ul {

            padding: 0;

        }

        li {

            float: left;

            padding: 1em;

            list-style: none;

        }

        #imagegallery {

        }

        #imagegallery a {

            margin: 0px 20px 20px 0px;

            padding: 0px;

            display: inline;

        }

        #imagegallery a img {

            border: 0;

        }

jquery：

var imagegallery = document.getElementById('imagegallery');

        var links = imagegallery.getElementsByTagName('a');

        for(var i = 0; i< links.length; i++) {

            var link = links[i];

            link.onclick=function() {

                var image = document.getElementById('image');

                image.src = this.href;

                var des = document.getElementById('des');

                des.innerText = this.title;

                return false;

            }

        }