使用jQuery实现的平滑滚动轮播图

  1. 云栖社区>
  2. 博客>
  3. 正文

使用jQuery实现的平滑滚动轮播图

优惠码发放 2018-08-29 05:35:47 浏览1188
展开阅读全文

使用jQuery实现的平滑滚动轮播图

<script type="text/javascript">
/*
 * 功能说明:
 * 1.点击向左(右)的图标 ,平滑的切换到上(下)页。
 * 2,无限的循环切换:第一页的商业为最后一页 ,最后一页的下,一张为第一页
 * 3,每隔3秒自动切换到下一页
 * 4,当鼠标进入图片区域时,自动切换停止 ,当鼠标离开时,又开始自动切换
 * 5,切换页面时 ,下面的圆点也跟着同步切换
 * 6,点击圆点切换对应的页。
 * */

    //-------------------------------页面的平滑翻页-------------
    $(function() {

        //点击向右或向左的图形进行翻页
        var $content = $('#content');
        var $list = $('#img_list');
        var $points = $('#points>span');
        var $prev = $('#but_1');
        var $next = $('#but_2');

        var IMG_WIDTH = 1000; //定义单张图片的长度
        var TIME = 400; //时间
        var ITEM_TIME = 10; //单张图片移动的时间
        var imgCount = 7;
        var index = 0; //起始圆点的索引
        var moving = false;
        /*
         * @
         * 手动的向左和向右的按钮
         */
        $prev.click(function() {
            nextPage(true);
        })
        $next.click(function() {
            nextPage(false);
        })
        /*
         *@
         * 自动翻页(true : 左 false : 右)
         */
        var $fanye = setInterval(function() {
            nextPage(false);
        }, 3000);

        /*
         *鼠标移入时自动翻页停止,箭头显示
         * 鼠标移出时自动翻页启动,箭头消失
         */
        $content.hover(function() {
            //清除循环
            clearInterval($fanye);
            $next.css('display', 'block');
            $prev.css('display', 'block');
        },
            function() {
                $next.css('display', 'none');
                $prev.css('display', 'none');
                $fanye = setInterval(function() {
                    nextPage(false);
                }, 3000);
            })
        /*
         * @
         * 点击圆点切换图片,并更新圆点的样式
         */
        $points.click(function() {
            var targetIndex = $(this).index();
            //计算目标页的下标
            if (targetIndex != index) {
                nextPage(targetIndex);
            }
        })
        /*
         * 移到下一页的方法
         */
        function nextPage(next) {
            //定义一个标志位,当标志位为true时表示当前的页面为翻页的过程中
            if (moving) {
                return; //当标志为为true时退出(也就是说在翻页的过程中禁止其他的事件调用nextPage()方法)
            }
            moving = true;
            var offset = 0; //所需要移动的距离,单张 或 单张*next
            //判断参数是boolean 还是整型的(boolean型的就是向左右移动,整型的就是移动到指定的图片)
            if (typeof next == 'boolean') {
                offset = next ? IMG_WIDTH : -IMG_WIDTH; //左移还是右移
            } else {
                offset = -(next - index) * IMG_WIDTH;
            }
            var itemoffset = offset / (TIME / ITEM_TIME); //单位移动的距离
            var now_margin_left = parseInt($list.css('margin-left')); //获得当前移动前的距离
            //图片的停止位置
            var targetLeft = now_margin_left + offset; //目标位置

            var xunhuan = setInterval(function() {
                now_margin_left += itemoffset; //获得当前的位置
                if (now_margin_left === targetLeft) {
                    clearInterval(xunhuan); //到达目标的位置,并清除定时器
                    moving = false; //在翻页结束时(清除定时器)

                    //判断是否到达左边和右边的边界
                    if (now_margin_left == -(imgCount - 1) * IMG_WIDTH) {
                        now_margin_left = (-IMG_WIDTH);
                    }
                    if (now_margin_left === 0) {
                        now_margin_left = -(imgCount - 2) * IMG_WIDTH;
                    }
                }
                $list.css('margin-left', now_margin_left + 'px'); //修改css样式
            }, ITEM_TIME);
            updatePoints(next); //更新圆点的样式 

            /*
             * 更新圆点的的方法
             */
            function updatePoints(next) { //将目标圆点更新为targetIndex
                var targetIndex = 0; //目标圆点
                //计算出目标圆点的下标,给目标圆点添加 class  on属性
                /*
                 * 判断参数是boolean型的还是整型的
                 * (如果是boolean型的直接左右移动,如果是整型的直接跳转到图片的索引)
                 * 
                 */
                if (typeof next == 'boolean') {
                    if (next) {
                        targetIndex = index - 1; //     0 ~ imgCount-1
                        //判断是否到达最左边或最右边
                        if (targetIndex == -(imgCount - 2)) { //第一个圆点
                            targetIndex = 0;
                        }
                    } else {
                        targetIndex = index + 1;
                        if (targetIndex == imgCount - 2) { //跳转到第5个图片
                            targetIndex = 0;
                        }
                    }
                } else {
                    targetIndex = next;
                }
                //清除上一个圆点的样式,给目标圆点添加样式
                $points.eq(index).removeClass('on');
                $points.eq(targetIndex).addClass('on');
                index = targetIndex; //移动方法
            }
        }
    })
    </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147

详细代码地址:https://download.csdn.net/download/wangzijian121/10630705

原文地址https://blog.csdn.net/wangzijian121/article/details/82143748

网友评论

作者关闭了评论
优惠码发放
+ 关注