SOURCE

 var Index=0;
        var timer=null;
        timer=setInterval(function(){
        	autoLoop()
        },3000)
        
        $(".container").mouseover(function(){
        	 clearInterval(timer)
        }).mouseout(function(){
        	timer = setInterval( function(){
				autoLoop();			
			}, 3000 );
        })
        
        slide();
		function slide () {
	        $(".icon li").click(function(){
	        	var index=$(this).index();
	        	$(".slide img").eq(index).css({"zIndex" : 1, "opacity" : 1,"transition":"0.1s"}).siblings("img").css({"zIndex" : 0, "opacity" : 0,"transition":"0.1s"});
	        	$(".icon li").eq(index).addClass('active').siblings("li").removeClass('active')	;
	        	Index = index;
	        })
       }
		
        function toggleSlide(){
        	$(".slide img").eq(Index).css({"zIndex" : 1, "opacity" : 1,"transition":"0.1s"}).siblings().css({"zIndex" : 0, "opacity" : 0,"transition":"0.1s"});
        	$(".icon li").eq(Index).addClass('active').siblings().removeClass('active')	
        }
           
        function autoLoop(){
        	Index++;
        	if(Index == $(".slide img").length){
        		Index=0
        	}
        	toggleSlide();
        }

<div class="container">
		<div class="slide">
			<img src="https://m.360buyimg.com/mobilecms/s1125x549_jfs/t16990/91/1072453031/195915/8de4233f/5ab9ec02N8e64711d.jpg" style="display:block;">	
			<img src="https://img1.360buyimg.com/da/s1138x556_jfs/t19018/104/1214766473/141963/d4c52b1c/5ac0a619N0d6e140c.jpg" >		
			<img src="https://m.360buyimg.com/mobilecms/s1138x556_jfs/t17302/242/1358363894/204942/119224cc/5ac495a7Nbd2d2d2d.jpg" >		
			<img src="https://m.360buyimg.com/mobilecms/s1138x556_jfs/t18193/325/1258624400/159622/c5037965/5ac4a381Na029e9b3.jpg" >	
		</div>
		<div class="icon">
			<ul>
				<li class="active"><a href="javascript:;">1</a></li>
				<li><a href="javascript:;">2</a></li>
				<li><a href="javascript:;">3</a></li>
				<li><a href="javascript:;">4</a></li>
			</ul>	
		</div>
	</div>	

	* {
		margin: 0px;
		padding: 0px;
	}
	ul,li {
		list-style-type: none;
	}
	a {
		text-decoration: none;
		color:#000;
	}
	img {
		border: none;
		position: absolute;
		z-index:0;
		opacity:0;
		filter:alpha(opacity:0);
	}
	.container {
		width: 760px;
		margin: 20px auto;
		position: relative;
	}
	.slide {
		width: 760px;
		height: 320px;
	}
	.slide img{ width: 100%; height: 100%;}
	.icon {
		position: absolute;
		right: 50px;
		bottom: 10px;
		z-index:2;
	}
	.icon li {
		float: left;
		margin-left: 20px;
		background: green;
		padding: 5px 10px;
		cursor:pointer;
	}
	.icon li.active {
		background: yellow;
	}