html - フェードスライダーで画像がスタックしない

Question

現在、フェードアウト、属性の変更、およびフェードインは、pre - 画像をロードすると、すでにサイクルで表示されている場合でも、画像をランダムにロードする必要があるようです。

http://jordan.rave5.com/tmptemp/

CSS

            #header-image-border {
                z-index: 400;
                height: 453px;
                width: 100%;
                min-width: 1024px;
                max-height: 453px;
                transition: width 2s;
                -webkit-transition: width 2s;
                padding-bottom: 4px;
                background-image: url(images/border.png);
                background-repeat: repeat-x;
                background-position: bottom;
            }

            #header-image-border img {
                width: 100%;
                height: 453px;
                top: 0;
                left: 0;
            }

HTML

                    <div id="header-image-border">
                        <img class="header-img" id="hi1" src="slides/head1.jpg" alt="The Tiger Spot" />
                        <img class="header-img" id="hi2" src="slides/head2.jpg" alt="The Tiger Spot" />
                        <img class="header-img" id="hi3" src="slides/head3.jpg" alt="The Tiger Spot" />
                        <img class="header-img" id="hi4" src="slides/head4.jpg" alt="The Tiger Spot" />
                        <div class="image-grad">
                            <div id="drop-ucp-container">
                                <div id="drop-ucp"><input class="search" type="text" size="25" value="Search" /> <input class="submit" type="button" value="Search" /></div>
                            </div>
                        </div>
                    </div>