首页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>

转载于:https://www.cnblogs.com/ft-Pavilion/p/4634878.html