首页banner特效

 <link href="css/swiper.min.css" rel="stylesheet" />

 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

 <div class="swiper-container">
            <div class="swiper-wrapper" id="idContainer2">
                <asp:Repeater runat="server" ID="rptBanner">
                    <ItemTemplate>
                        <div class="swiper-slide" style='display: <%#Container.ItemIndex == 0 ? "block" : "none" %>'>
                            <a href="<%#Eval("Linkurl") %>" target="_blank">
                                <img src="<%# globalVariables.FileDir+Eval("GlobalPicBig3") %>">
                            </a>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            <div class="swiper-pagination">
            </div>
            <div class="wrapperLunbo">
                <ul>
                    <asp:Repeater ID="rptDot" runat="server">
                        <ItemTemplate>
                            <li class="<%#Container.ItemIndex == 0 ? "wrapperLunboCurrent" : "" %>" onclick="bannerPoint(this)">
                                <a href="javascript:void(0)"></a></li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
            <div class="swiper-button-next" id="bannerNext" onclick="bannerPrev()">
            </div>
            <div class="swiper-button-prev" id="bannerPrev" onclick="bannerNext()">
            </div>
        </div>

<script type="text/javascript">

        $(window).scroll(function () {
            var firstScreen = $(".BrandBox").offset().top - $(document).scrollTop();
            if (firstScreen <= 687 && firstScreen > 300)
            { menuPoint(0); }
            var secondScreen = $(".contentTitleAll").offset().top - $(document).scrollTop();
            if (secondScreen <= 300 && secondScreen > -300)
            { menuPoint(1); }
            var thirdScreen = $(".showSImgBox").offset().top - $(document).scrollTop();
            if (thirdScreen <= 1000 && thirdScreen > 300) {
                menuPoint(2);
            }
            var fouthScreen = $(".footerBox2").offset().top - $(document).scrollTop();
            if (fouthScreen < 900)
            { menuPoint(3); }
        });
        function menuPoint(index)
        { $(".screenSwitch li").eq(index).addClass("screenSwitchCurrent").siblings().removeClass(); }
        $(document).ready(function () {
            $(".screenSwitch li").click(function () {
                $(this).addClass("screenSwitchCurrent").siblings().removeClass();
            });
            bannerLength = $("#idContainer2 div").length;
            bannerSetInterval = setInterval("runBanner()", 3000);
        });
        function bannerPrev() {
            clearInterval(bannerSetInterval);
            ++bannerIndex;
            if (bannerIndex >= bannerLength) {
                bannerIndex = bannerLength - 1;
            }
 
            $(".wrapperLunbo li").eq(bannerIndex).addClass("wrapperLunboCurrent").siblings().removeClass();
            $("#idContainer2 div").eq(bannerIndex).show().siblings().hide();
            bannerSetInterval = setInterval("runBanner()", 3000);
        }
        function bannerNext() {
            clearInterval(bannerSetInterval);
            --bannerIndex;
            $("#txtBrand").val(bannerIndex);
            if (bannerIndex < 0) {
                bannerIndex = 0;
            }
            $(".wrapperLunbo li").eq(bannerIndex).addClass("wrapperLunboCurrent").siblings().removeClass();
            $("#idContainer2 div").eq(bannerIndex).show().siblings().hide();
            bannerSetInterval = setInterval("runBanner()", 3000);
        }
        function bannerPoint(ele) {
            clearInterval(bannerSetInterval);
            bannerIndex = $(ele).index();
            $(".wrapperLunbo li").eq(bannerIndex).addClass("wrapperLunboCurrent").siblings().removeClass();
            $("#idContainer2 div").eq(bannerIndex).show().siblings().hide();
            bannerSetInterval = setInterval("runBanner()", 3000);
        }
    </script>