A simple carousel

HTML

<h1>a simple carousel</h1>
<div id="carousel" class="carousel">
    <div class="pagination">
        <a href="#" class="prev">prev</a>
        <a href="#" class="next">next</a>
    </div>
    <div class="play">
        <!-- 此处需要动态插入一段数字代码 -->
    </div>
    <div class="pic">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
        </ul>
    </div>
</div>

<style>
* { margin:0; padding: 0; }
body { font:12px/1.5 arial; }
ul { list-style: none; }
.carousel { position: relative; width: 960px; height: 480px; border: 2px solid orange; margin: 0 auto; }
.carousel .play { position: absolute; right: 120px; bottom: 23px; z-index: 2; }
.carousel .play a { padding: 4px 8px; margin-right: 6px; text-decoration: none; border: 1px solid orange; border-radius: 3px; }
.carousel .play a.current { background: orange; color: #fff; }
.carousel .pagination { position: absolute;  right: 10px; bottom: 20px; z-index: 2; }
.carousel .pagination a { display: inline-block; padding: 0 10px; height: 24px; border: 1px solid orange; border-radius: 4px; background: #eee; color: #999; text-decoration: none; line-height: 24px; }
.carousel .pagination a:hover { text-decoration: none; }
.carousel .pic { width: 960px; }
.carousel .pic ul { font-size: 30px; height: 480px; overflow: hidden; *zoom:1; }
.carousel .pic ul li {  float: left; width: 960px; text-align: center; overflow: hidden; }
.carousel .pic ul li a { display: block; height: 480px; line-height: 480px; background: #efefef; }
</style>

<script>
$(function(){
    var containner=$('#carousel');
    var...