码迷,mamicode.com
首页 > Web开发 > 详细

图片轮播jQuery

时间:2015-06-15 14:20:19      阅读:155      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!