SOURCE

var PictureScroll = function() {
	return {
		totalNumber : 0,
		currentIndex : 0,
		interval : null,
		hasStarted : false, // 是否已经开始轮播
		scrollTime : 2000,// 轮播时间间隔

		panelCls : '.slider-panel',
		itemCls : '.slider-item',
		pageCls : '.slider-page',
		preButtonCls : '.slider-pre',
		nextButtonCls : '.slider-next',

		initConfig : function(config) {
			var me = this;
			for ( var name in config) {
				this[name] = config[name];
			}
		},

		init : function(config) {
			var me = this;
			me.initConfig(config || {});

			me.totalNumber = $(me.panelCls).length;
			// 将除了第一张图片隐藏
			$(me.panelCls + ':not(:first)').hide();

			// 将第一个slider-item设为激活状态
			$(me.itemCls + ':first').addClass('slider-item-selected');
			// 隐藏向前、向后翻按钮
			$(me.pageCls).hide();
			// 鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
			$([me.panelCls, me.preButtonCls, me.nextButtonCls].join(','))
					.hover(function() {
						me.stop();
						$(me.pageCls).show();
					}, function() {
						$(me.pageCls).hide();
						me.start();
					});

			$(me.itemCls).hover(
					function(e) {
						me.stop();
						var preIndex = $(me.itemCls).filter(
								".slider-item-selected").index();
						me.currentIndex = $(this).index() || 0;
						me.play(preIndex, me.currentIndex);
					}, function() {
						me.start();
					});
			$(me.preButtonCls).unbind('click');
			$(me.preButtonCls).bind('click', function() {
				me.pre();
			});
			$(me.nextButtonCls).unbind('click');
			$(me.nextButtonCls).bind('click', function() {
				me.next();
			});

			// 开始轮播
			me.start();

			return me;
		},

		/**+
		 * 向前翻页
		 */
		pre : function() {
			var preIndex = this.currentIndex;
			this.currentIndex = (--this.currentIndex + this.totalNumber)
					% this.totalNumber;
			this.play(preIndex, this.currentIndex);
		},

		/**
		 * 向后翻页
		 */
		next : function() {
			var preIndex = this.currentIndex;
			this.currentIndex = ++this.currentIndex % this.totalNumber;
			this.play(preIndex, this.currentIndex);
		},

		/**
		 * 从preIndex页翻到currentIndex页 preIndex 整数，翻页的起始页 currentIndex 整数，翻到的那页
		 */
		play : function(preIndex, currentIndex) {
			$(this.panelCls).eq(preIndex).fadeOut(500).parent().children().eq(
					currentIndex).fadeIn(1000);
			$(this.itemCls).removeClass('slider-item-selected');
			$(this.itemCls).eq(currentIndex).addClass('slider-item-selected');
		},

		/**
		 * 开始轮播
		 */
		start : function() {
			var me = this;
			if (!me.hasStarted) {
				me.hasStarted = true;
				me.interval = window.setInterval(function() {
					me.next();
				}, me.scrollTime);
			}
		},

		/**
		 * 停止轮播
		 */
		stop : function() {
			window.clearInterval(this.interval);
			this.hasStarted = false;
		}
	}
}();

PictureScroll.init();

<div class="mainItem">
	<div class="slider">
		<ul class="slider-main">
			<li class="slider-panel"><a href="#" target="_blank">1</a></li>
			<li class="slider-panel"><a href="#" target="_blank">2</a></li>
			<li class="slider-panel"><a href="#" target="_blank">3</a></li>
			<li class="slider-panel"><a href="#" target="_blank">4</a></li>
		</ul>
		<div class="slider-extra">
			<ul class="slider-nav">
				<li class="slider-item">1</li>
				<li class="slider-item">2</li>
				<li class="slider-item">3</li>
				<li class="slider-item">4</li>
			</ul>
			<div class="slider-page">
				<a class="slider-pre" href="javascript:;;"></a>
				<a class="slider-next" href="javascript:;;"></a>
			</div>
		</div>
	</div>
</div>

a {
	text-decoration: none;
}

ul {
	list-style: outside none none;
}

.slider, .slider-panel img, .slider-extra {
	width: 650px;
	height: 413px;
}

.slider {
	text-align: center;
	margin: 30px auto;
	position: relative;
}

.slider-panel, .slider-nav, .slider-pre, .slider-next {
	position: absolute;
	z-index: 8;
}

.slider-panel {
	position: absolute;
}

.slider-panel img {
	border: none;
}

.slider-extra {
	position: relative;
}

.slider-nav {
	margin-left: -51px;
	position: absolute;
	left: 50%;
	bottom: 4px;
}

.slider-nav li {
	background: #3e3e3e;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	margin: 0 2px;
	overflow: hidden;
	text-align: center;
	display: inline-block;
	height: 18px;
	line-height: 18px;
	width: 18px;
}

.slider-nav .slider-item-selected {
	background: blue;
}

.slider-page a {
	/* background: rgba(0, 0, 0, 0.2);*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,
		endColorstr=#33000000);
	color: #fff;
	text-align: center;
	display: block;
	font-family: "simsun";
	font-size: 22px;
	width: 76px;
	height: 112px;
	line-height: 62px;
	margin-top: -31px;
	position: absolute;
	top: 50%;
}

.slider-page a:HOVER {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,
		endColorstr=#66000000);
}

.slider-pre {
	background: transparent url(../styles/images/buttons.png) no-repeat
		scroll top left;
}

a.slider-pre :HOVER {
	background-position: bottom left;
}

.slider-next {
	left: 100%;
	margin-left: -76px;
	background: transparent url(../styles/images/buttons.png) no-repeat
		scroll top right;
}

a.slider-next :HOVER {
	background-position: bottom right;
}