javascript - 如何自己用jq写一个上下都有图片的轮播图？

Question

如图所示，底下的小图在自动轮播的时候不动，只是在1秒后篮框出现到下个小图上，等到蓝框出现到最右侧的小图时，下一秒底下的小图向左移动4个小图的位置，这样的自动轮播图该怎么做，求大神给个思路

这是轮播图代码部分

            <p class="img_list_area">
                    <p class="top_img">
                        <span class="T_next"></span>
                        <span class="T_prev"></span>
                        <ul>
                            <li>
                                <a>
                                    <img src="img/img_list.png"/>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img/>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img/>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img/>
                                </a>
                            </li>
                            <br clear="all"/>
                        </ul>
                    </p>
                    <p class="bottom_img">
                        <span class="B_next"></span>
                        <span class="B_prev"></span>
                        <ul>
                            <li class="on">
                                <a>
                                   <img src="img/img_list.png"/>
                                </a>
                                <p class="blue_border"></p>
                            </li>
                            <li>
                                <a>
                                   <img src="img/img_list.png"/>
                                </a>
                                <p class="blue_border"></p>
                            </li>
                            <li>
                                <a>
                                   <img src="img/img_list.png"/>
                                </a>
                                <p class="blue_border"></p>
                            </li>
                            <li>
                                <a>
                                   <img src="img/img_list.png"/>
                                </a>
                                <p class="blue_border"></p>
                            </li>
                            <br clear="all"/>
                        </ul>
                    </p>
                </p>

Answer 1

让上面的图片和下面的图片通过某个属性对应起来，当上面的图片是active的时候，下面的图片移到最左边的位置，这样子循环，其他的跟普通轮播一样