javascript - How to write a carousel with images above and below using jq?

Question

As shown in the picture, the bottom picture does not move during the automatic carousel. The basket frame will appear on the next picture after 1 second. When the blue box appears on the rightmost picture, the next picture will appear. The small picture at the bottom of one second moves 4 small pictures to the left. How to do such an automatic carousel? Please give me some ideas

This is the carousel image code part

            <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

Let the upper image and the lower image correspond to each other through a certain attribute. When the upper image is active, the lower image moves to the leftmost position, and this cycle is repeated. The rest is the same as a normal carousel