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