带箭头的焦点图效果

HTML
  <div id="content">
        <div id="preview_wrap">
            <div id="preview_outer">
                <div id="preview_inner">
                    <div>
                        <img src="images/1_b.jpg" alt="Leonardo Maia" />
                        <a href="">Leonardo Maia</a>
                    </div>
                    <div>
                        <img src="images/2_b.jpg" alt="skillicorn" />
                        <a href="">skillicorn</a>
                    </div>
                    <div>
                        <img src="images/3_b.jpg" alt="theenergycell" />
                        <a href="">theenergycell</a>
                    </div>
                    <div>
                        <img src="images/4_b.jpg" alt="Fred Maya" />
                        <a href="">Fred Maya</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="thumbs">
            <div id="arrow">
            </div>
            <span>
                <img src="images/1_s.gif" alt="Leonardo Maia" /></span> <span>
                    <img src="images/2_s.gif" alt="skillicorn" /></span> <span>
                        <img src="images/3_s.gif" alt="theenergycell" /></span> <span>
                            <img src="images/4_s.gif" alt="Fred Maya" /></span>
        </div>
    </div>
CSS代码
   #preview_wrap
        {
            margin: 0 auto;
            padding: 22px;
            width: 550px;
            height: 400px;
            background: url('images/bg_preview.gif') top left no-repeat;
        }
        
        #preview_outer
        {
            overflow: hidden;
            width: 550px;
            height: 400px;
            position: relative;
        }
        
        #preview_inner
        {
            text-align: left;
            height: 100%;
            position: relative;
        }
        
        #preview_inner div
        {
            float: left;
            width: 550px;
            height: 400px;
            position: relative;
        }
        
        #preview_inner div a
        {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            text-indent: 20px;
            padding: 20px 0;
            color: #fff;
            background: url(images/bg_trans.png);
            text-decoration: none;
            font-size: 18px;
        }
        
        #thumbs
        {
            padding-top: 30px;
            position: relative;
            width: 750px;
            text-align: center;
        }
        
        #thumbs span
        {
            padding: 12px;
            width: 80px;
            height: 80px;
            cursor: pointer;
            background: url('images/bg_thumb.gif') top left no-repeat;
            display: inline-block;
        }
        
        #arrow
        {
            position: absolute;
            top: -13px;
            background: url('images/bg_arrow.gif') top center no-repeat;
            width: 104px;
            height: 39px;
            display: none;
        }
jQuery
  $(document).ready(function () {
            // Save  the jQuery objects for later use.
            var outer = $("#preview_outer");
            var arrow = $("#arrow");
            var thumbs = $("#thumbs span");

            var preview_pos;
            var preview_els = $("#preview_inner div");
            var image_width = preview_els.eq(0).width(); // Get width of imaages

            // Hook up the click event
            thumbs.click(function () {
                // Get position of current image
                preview_pos = preview_els.eq(thumbs.index(this)).position();

                // Animate them!
                outer.stop().animate({ 'scrollLeft': preview_pos.left }, 500);
                arrow.stop().animate({ 'left': $(this).position().left }, 500);
            });

            // Reset positions on load
            arrow.css({ 'left': thumbs.eq(0).position().left }).show();
            outer.animate({ 'scrollLeft': 0 }, 0);

            // Set initial width
            $("#preview_inner").css('width', preview_els.length * image_width);
        });