码迷,mamicode.com
首页 > 其他好文 > 详细

首页banner特效

时间:2015-07-10 11:00:59      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

 

 

 

 

 <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" %>>
                            <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)">
                                <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>


技术分享

首页banner特效

标签:

原文地址:http://www.cnblogs.com/ft-Pavilion/p/4634878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!