jQuery幻灯片放映与分页

Question

我想在这里请一点帮助。 我正在尝试使用本教程创建一个简单的幻灯片放映 http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

幻灯片放映工作得很好但是我想添加一个分页的东西或类似的东西也随幻灯片放映一起改变。 我附上了我想要修复的图像。

我要修复的蓝点和灰点。因此，当幻灯片显示时，蓝点应该同时工作。

我的代码 jQuery的

<script type="text/javascript">
jQuery(function() {
    jQuery("#map1").googleMap(14.55473, 121.024445, 7, {
        controls: ["GSmallMapControl"],
        markers: jQuery(".geo")
    });
    // Example to access the map object is below:
    // $.googleMap.maps["map1"].setMapType(G_SATELLITE_TYPE);

    // SLIDESHOW
    jQuery("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
      jQuery('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  5000);  

    var img1 = jQuery( '<img src="<?php echo get_template_directory_uri();?>/images/bluedot_testimonial.png" class="img1" />' );
    var img2 = jQuery( '<img src="<?php echo get_template_directory_uri();?>/images/greydot_testimonial.png" class="img2" />' );
    var img3 = jQuery( '<img src="<?php echo get_template_directory_uri();?>/images/greydot_testimonial.png" class="img3" />' );
    var img4 = jQuery( '<img src="<?php echo get_template_directory_uri();?>/images/greydot_testimonial.png" class="img4" />' );
    var img5 = jQuery( '<img src="<?php echo get_template_directory_uri();?>/images/greydot_testimonial.png" class="img5" />' );

    setInterval(function() { 
      jQuery('#timg > .img1')
        .remove('.img1');
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  5000);  
});
</script>

HTML

<ul>
    <li>
        <div id="slideshow">
        <?php
        $getTesti = $wpdb->get_results( "SELECT * FROM jon_page_testimonial ORDER BY pagetid DESC LIMIT 0,5" );
        foreach ( $getTesti as $rows ) {
            $getauthor_n = $wpdb->get_row( "SELECT * FROM jon_nanny WHERE user_login = '".$rows->user_login."' " );
            $getauthor_p = $wpdb->get_row( "SELECT * FROM jon_family WHERE user_login = '".$rows->user_login."' " );
        ?>
           <div align="center" style="text-align:justify !important;">
             <img src="<?php echo get_template_directory_uri();?>/images/quote_testimonial.png" style="float:left;" title="quote" align="texttop" />
             <?php echo substr( $rows->message, 0,150 ) . ' ... ' ; ?>
             <br />
             <img src="<?php echo get_template_directory_uri();?>/images/hr_testimonial.png" title="author" style="margin-top:10px; margin-bottom:5px; margin-left:10px;" />
             <br />
             <div align="center">
             <?php 
             if ( $getauthor_n == null ) :
                echo ucfirst( $getauthor_p->fname ) . ' ' . ucfirst( $getauthor_p->mname ) . ' ' . ucfirst( $getauthor_p->lname );
             elseif ( $getauthor_p == null ) :
                echo ucfirst( $getauthor_n->fname ) . ' ' . ucfirst( $getauthor_n->mname ) . ' ' . ucfirst( $getauthor_n->lname );
             else :
                echo '';
             endif;
             ?>
             <br />
             </div>
           </div>
        <?php
        }
        ?>
        </div>
        <div id="timg" align="center">
            <img src="<?php echo get_template_directory_uri();?>/images/bluedot_testimonial.png" class="img1" />
            <img src="<?php echo get_template_directory_uri();?>/images/greydot_testimonial.png" class="img2" />
            <img src="<?php echo get_template_directory_uri();?>/images/greydot_testimonial.png" class="img3" />
            <img src="<?php echo get_template_directory_uri();?>/images/greydot_testimonial.png" class="img4" />
            <img src="<?php echo get_template_directory_uri();?>/images/greydot_testimonial.png" class="img5" />
        </div>
    </li>
</ul>