SOURCE

var myslider = function() {
			var lunBo = document.getElementById("lunbo");
			var list = document.getElementById("list");
			var btn = document.getElementById("buttons").getElementsByTagName('span');
			var btnLen = btn.length;
			var prev = document.getElementById("prev");
			var next = document.getElementById('next');
			var index = 1;
			var timer;
			var animated = false;

			function change() {
				animated = true;
				var newLeft = -100 * index;
				list.style.left = newLeft + '%';
				index == btnLen + 1 ? index = 1 : '';
				index == 0 ? index = btnLen : '';
				if(index == 1 || index == btnLen) {
					setTimeout(function() {
						list.style.transition = 'none';
						list.style.left = -100 * index + '%';
						setTimeout("list.style.transition = '.5s';", 50);
						animated = false;
					}, 500);
				} else {
					animated = false;
				}
				showBtn();
			};

			function showBtn(_index) {
				for(var i = 0; i < btnLen; i++) {
					btn[i].className = '';
				}
				btn[index - 1].className = 'on';
			};
			Array.prototype.forEach.call(btn,function(v,i){
				v.onclick = function(){
					index = i+1;
					list.style.left = -100 * index + '%';
					showBtn();
				}
			});
			next.onclick = function() {
				if(animated) {
					return;
				}
				index++;
				change();
			};
			prev.onclick = function() {
				if(animated) {
					return;
				}
				index--;
				change();
			};

			function play() {
				timer = setInterval("next.onclick()", 2000);
			};

			function stop() {
				clearTimeout(timer);
			};
			play();
			lunBo.onmouseover = stop;
			lunBo.onmouseout = play;

			lunBo.onmousedown = function(ev) {
				ev.stopPropagation();
				list.style.transition = 'none';
				var w_list = list.offsetLeft;
				var downX = ev.clientX;
				var moveX = 0;

				document.onmousemove = function(ev) {
					ev.stopPropagation();
					moveX = ev.clientX - downX;
					list.style.left = w_list + moveX + 'px';
				};

				document.onmouseup = function() {
					list.style.transition = '.5s';
					if(moveX/w_list > 0.1){
						next.onclick();
					}else if(moveX/w_list < -0.1){
						prev.onclick();
					}else{
						list.style.left = -100 * index + '%';
					}
					document.onmousemove = null;
					document.onmouseup = null;
				};
				return false;
			};
		}
		myslider();

<div id="lunbo">
			<div id="list" style="left: -100%;">
				<div class="listitem" style="background:blue;">4</div>
				<div class="listitem" style="background:red;">1</div>
				<div class="listitem" style="background:yellow;">2</div>
				<div class="listitem" style="background:green;">3</div>
				<div class="listitem" style="background:blue;">4</div>
				<div class="listitem" style="background:red;">1</div>
			</div>
			<div id="buttons">
				<span class="on"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:void(0);" id="prev" class="arrow">&lsaquo;</a>
			<a href="javascript:void(0);" id="next" class="arrow">&rsaquo;</a>
		</div>

a {
			text-decoration: none;
			color: #3DBBF5;
		}
		#lunbo {
			width: 100%;
			height: 300px;
			position: relative;
			overflow: hidden;
		}
		#list {
			position: relative;
			white-space: nowrap;
			font-size: 0;
			cursor: pointer;
			transition: .5s;
			/* 这块用行元素模拟，所以才用该属性，块元素可修改这块*/
		}
		#list .listitem {
			display: inline-block;
			width: 100%;
			height: 300px;
			text-align: center;
			line-height: 300px;
			font-weight: bold;
			font-size: 100px;
			color: #fff;
		}
		#buttons {
			position: absolute;
			bottom: 0;
			text-align: center;
			width: 100%;
			height: 40px;
			line-height: 40px;
		}
		#buttons span {
			display: inline-block;
			width: 15px;
			height: 5px;
			background: #fff;
			margin: 0 10px;
			cursor: pointer;
			transition: all .5s;
		}
		#buttons span.on {
			background: #262626;
		}
		.arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 80px;
			font-weight: bold;
			color: #fff;
			opacity: .3;
			transition: all .5s;
		}
		#lunbo:hover .arrow {
			opacity: 1;
		}
		#prev {
			left: 10px;
		}
		#next {
			right: 10px;
		}