首页 > Web开发 > 详细

图片轮播jQuery

时间:2015-06-15 14:18:22      阅读:171      评论:0      收藏:0      [点我收藏+]

技术分享

 
 
  <script type="text/javascript">
        //图片轮播
        var bannerIndex = 0; bannerTimer = null;
        function banner() {
            ++bannerIndex;
            if (bannerIndex > 5) {
                bannerIndex = 0;
            }
            $(".turns li").eq(bannerIndex).find("a").addClass("circleCurrent").parent().siblings().find("a").removeClass("circleCurrent");
            $(".swiper-container li").eq(bannerIndex).show().siblings().hide();
 
        };
 
            $(document).ready(function () {
               // var swiper = new Swiper(‘.swiper-container‘, {
                //    pagination: ‘.swiper-pagination‘,
                 //   paginationClickable: true
              //  });
 
                //返回顶部
                $("#gotop").click(function () {
                    $("#content").animate({ scrollTop: "0px" }, 100);
                });
 
                bannerTimer = window.setInterval("banner()", 3000);
                //点击小点,切换图片
                $(".turns li").click(function () {
                    window.clearInterval(bannerTimer);
                    bannerTimer = null;
                    bannerIndex = $(this).index() - 1;
                    banner();
                    bannerTimer = window.setInterval("banner()", 3000);
                });
 
            });
 
    </script>

图片轮播jQuery

原文:http://www.cnblogs.com/ft-Pavilion/p/4576903.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!