使用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>

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