javascript - Wie schreibe ich mit JQ ein Karussell mit Bildern oben und unten?

Question

Wie im Bild gezeigt, bewegt sich das kleine Bild unten während des automatischen Karussells nicht, aber der Korb erscheint nach 1 Sekunde auf dem nächsten kleinen Bild. Wenn das blaue Kästchen auf dem ganz rechten kleinen Bild erscheint, erscheint in der nächsten Sekunde das kleine Das Bild unten verschiebt 4 kleine Bilder nach links. Wie macht man so ein automatisches Karussell? Bitte geben Sie mir ein paar Ideen
Dies ist der Codeteil für das Karussellbild

            <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的时候，下面的图片移到最左边的位置，这样子循环，其他的跟普通轮播一样